Как использовать *Ngfor в другом *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>
МОДЕЛИ
актиф модель
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>();
}
Модель CritereActive
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();
}
Модель ЛесКритерес
export class LesCriteres{
code: string = null;
nom: string = '';
}
РЕЗУЛЬТАТ
у меня есть это, когда я выполняю свой код:
но я не хочу что-то вроде этого:
ты прав, я отредактировал
каждый флажок имеет значение. Я хочу посмотреть, существует ли его значение в a.critere. если он существует, я проверяю его! извините, может быть, это из-за моего английского :(
Теперь я знаю, чего ты хочешь добиться. Пожалуйста, проверьте мой отредактированный ответ.
Оно работает !!! всем спасибо :)
Ответы 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>
Сравнение проводится не между элементом actif.lesCriteresActifs и элементом lesCriteres, а между элементом lesCriteresActifs.critere и элементом lesCriteres, поэтому мне нужен индекс элемента lesCriteresActifs
Я не уверен, что правильно понимаю. Тогда в вашем коде вам не нужен индекс элемента «l», а не элемента «a»?
Взгляд на некоторые из ваших данных поможет.
Да ! я не силен в английском!! подождите, я отредактирую свой пост, чтобы вы лучше поняли
Вы понимаете теперь ?
Не совсем :D Например, если l является вторым элементом lesCriteres, вы хотите посмотреть на второй элемент lesCriteresActifs? Вот почему вам нужен индекс?
lesCritere представляет собой массив: он содержит 2 экземпляра Criteres [{code: C, nom: Confidentialité}, {code: I, nom: Integrité}] ==> поэтому обычно у меня есть 2 флажка [C и I]
Второй массив — lesCriteresAcifs! я хочу проверить, есть ли элемент, который имеет то же значение, что и мои флажки. если есть, то я хочу проверить это
вот почему я не хочу использовать индекс lesCriteresActifs и сравнивать каждый элемент lesCriteresActifs [index].critere с lesCriteres
посмотрите на картинку ! код дает мне 4 флажка вместо 2 флажков
Позвольте мне задать вам вопрос. совпадают ли индексы Criteres и lesCriteresActifs? Что означает 2 элемента в Criteres, строго 2 элемента в lesCriteresActifs и 1-й элемент Criteres сопоставляются с 1-м элементом lesCriteresActifs?
Нет ! Потому что есть некоторые элементы lesCriteres, которых нет в lesCriteresActifs.critere.
Вы получили 2 флажка после того, как попробовали Ответ Роберта Друска или даже раньше?
Его ответ не работает, потому что он проверяет, если "actif.lesCriteresActifs.includes(l)" вместо проверки, если "actif.lesCriteresActifs[i].critere.includes(l)" ! я имею в виду сравнение между "a.critere" и "critere" вместо "a" и "critere"
Большое спасибо @Róbert Druska !!
Я не понимаю, почему вы используете индекс. Как только вы напишете «let a of actif.lesCriteresActifs; let i=index», тогда actif.lesCriteresActifs[i], который вы будете использовать позже в коде, будет тем же самым, что и «a»! :D И извините, я до сих пор не совсем понимаю, чего вы хотите добиться.