У меня есть число флажков ngFor для X следующим образом:
<div *ngFor = "let child of childrenList; let indice=index">
<p-checkbox label = "{{child.firstname}} {{child.lastname}}" binary = "true" (onChange) = "dentalChanged(indice, $event)" name = "item-{{indice}}">
</p-checkbox>
</div>
Я смог определить, когда элемент проверен, с помощью следующего кода:
dentalChanged(indice: any, event: any): void {
alert(indice)
console.info(event.checked)
}
Теперь моя проблема в том, что я должен сохранять выбранные элементы при нажатии кнопки, а поскольку количество элементов в ChildrenList является переменным, я не знаю, как искать от 0 до n.
Спасибо за вашу помощь.
вы можете сохранить выбранные значения в переменной
selectedValues: any[];
dentalChanged(indice: any, event: any, child: any): void {
if (event.checked) {
this.selectedValues.push(child);
} else {
// you can also use splice and indice to remove child if you dont have any unique property like id
this.selectedValues = this.selectedValues.filter(c => c.id != child.id);
}
}
передать дочерний метод DentalChanged из html
<div *ngFor = "let child of childrenList; let indice=index">
<p-checkbox label = "{{child.firstname}} {{child.lastname}}" binary = "true" (onChange) = "dentalChanged(indice, $event. child)" name = "item-{{indice}}">
</p-checkbox>
</div>
вы можете использовать SelectionModel, например:
компонент
selection = new SelectionModel<any[]>(true, []);
items = [{ name: "checkbox1" }, { name: "checkbox2" }, { name: "checkbox3" }];
шаблон
<div>
<div *ngFor = "let item of items">{{item.name}} - <mat-checkbox (change) = "selection.toggle(item)"
[checked] = "selection.isSelected(item)">
</mat-checkbox>
</div>
<div>
Selection count: {{ selection.selected.length}}
</div>
</div>
SelectionModel имеет много полезных методов, таких как toggle, deselect, isEmpty, clear и т. д.