Как использовать * Ngfor в другом * Ngfor - PullRequest
Новая
       34

Как использовать * Ngfor в другом * Ngfor

0 голосов
/ 07 апреля 2019

Я пытаюсь создать флажок для каждого элемента массива "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 = '';
}

РЕЗУЛЬТАТ

у меня есть это, когда я выполняю свой код:

но я не хочу что-то вроде этого:

enter image description here

1 Ответ

1 голос
/ 07 апреля 2019

Это должно работать (с использованием метода includes (), без дополнительных * 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>
...