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

#html #angular #checkbox #ngfor

#HTML #угловой #флажок #ngfor

Вопрос:

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

Модели

модель actif

 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 = '';
}

Результат

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

но я не хочу чего-то подобного :

1. Я не понимаю, почему вы используете индекс. Как только вы напишете «пусть a из actif.lesCriteresActifs; пусть i=index», тогда actif.lesCriteresActifs[i], который вы используете позже в коде, будет таким же, как «a» ! 😀 И я сожалею, я все еще не совсем понимаю, чего вы хотите достичь.

2. вы правы, я отредактировал его

3. каждый флажок имеет значение. Я хочу посмотреть, существует ли его значение в.critere. если он существует, я проверяю его! извините, может быть, это из-за моего английского:(

4. Теперь я знаю, чего вы хотите достичь. Пожалуйста, проверьте мой отредактированный ответ.

5. Это работает!!! спасибо всем вам 🙂

Ответ №1:

Это должно сработать (с использованием метода 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>

О методе includes: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>

1. Сравнение проводится не между элементом actif.lesCriteresActifs и элементом lesCriteres, а между элементом lesCriteresActifs.critere и элементом lesCriteres, поэтому мне нужен индекс элемента lesCriteresActifs

2. Я не уверен, что правильно понимаю. Тогда в вашем коде вам не нужен индекс элемента «l», а не элемента «a»?

3. Краткий обзор некоторых ваших данных помог бы.

4. Да! я не силен в английском!! подождите, я отредактирую свой пост, чтобы вы лучше поняли

5. теперь вы понимаете?