How to use *Ngfor in an other *Ngfor - html

Question

I am trying to create a checkbox for each element of an array "lesCriteres".
Then I want each of these checkboxes to be checked if its value is in the table "actif.lesCriteresActifs"
Here is the code I want but it does not work as I want
<div class="checkbox-inline" *ngFor="let l of lesCriteres">
<div *ngFor="let a of actif.lesCriteresActifs">
<label></label>
<input type="checkbox" (change)="onChangeEvent(l.code, $event.target.checked)" [checked]="a.critere.code==l.code"> {{l.code}}<br>
</div>
</div>
MODELS
actif model
import {TypeActif} from './model.type-actif';
import {CritereActif} from './model.critere-actif';
export class Actif{
ref: string;
nom: string = '';
type_actif: TypeActif = new TypeActif();
lesCriteresActifs: Array<CritereActif> = new Array<CritereActif>();
}
CritereActif model
import {Actif} from './model.actif';
import {LesCriteres} from './model.les-criteres';
import {LesValeurs} from './model.les-valeurs';
export class CritereActif{
id: number;
actif: Actif = new Actif();
critere: LesCriteres = new LesCriteres();
valeur: LesValeurs = new LesValeurs();
}
LesCriteres model
export class LesCriteres{
code: string = null;
nom: string = '';
}
RESULT
i have this when i execute my code :
but i want't something like this :

Answer 1

This should work (using includes() method, without additional *ngFor):
<div class="checkbox-inline" *ngFor="let l of lesCriteres">
<label></label>
<input type="checkbox" (change)="onChangeEvent(l.code, $event.target.checked)" [checked]="actif.lesCriteresActifs.includes(l)"> {{l.code}}<br>
</div>
About includes method: https://www.w3schools.com/jsref/jsref_includes_array.asp
EDIT:
This solution comes to mind.
In .ts file of your component, inside class declare a function:
containsCode = (code) => {
for (let a of this.actif.lesCriteresActifs) {
if (a.critere.code === code) {
return true
}
}
return false
Then in .html file:
<div class="checkbox-inline" *ngFor="let l of lesCriteres">
<label></label>
<input type="checkbox" (change)="onChangeEvent(l.code, $event.target.checked)" [checked]="containsCode(l.code)"> {{l.code}}<br>
</div>