如何在其他* Ngfor中使用* Ngfor

Question

我正在尝试为数组“ lesCriteres”的每个元素创建一个复选框。 然后我希望检查这些复选框中的每个复选框的值是否在表“ actif.lesCriteresActifs”中

这是我想要的代码，但是不能按我的要求工作

<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>

楷模

行为模型

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模型

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模型

export class LesCriteres{
  code: string = null;
  nom: string = '';
}

结果

当我执行我的代码时，我有这个：

但我不要这样：

Answer 1

这应该可以工作（使用include（）方法，无需附加* 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>

关于包含方法： https ： //www.w3schools.com/jsref/jsref_includes_array.asp

编辑：

这个解决方案浮现在脑海。 在组件的.ts文件中，类内声明一个函数：

containsCode = (code) => {
    for (let a of this.actif.lesCriteresActifs) {
        if (a.critere.code === code) {
            return true
        }
    }
    return false

然后在.html文件中：

<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>