Вот мой шаблон html
<mat-card>
<mat-card-content>
<h2 class="example-h2">Select Employee</h2>
<section class="example-section">
<mat-checkbox [(ngModel)]="checked">Select All</mat-checkbox>
</section>
<section class="example-section" *ngFor="let r of emp">
<mat-checkbox class="example-margin" [(ngModel)]="checked">{{r.name}}</mat-checkbox>
</section>
</mat-card-content>
</mat-card>
Это код не работает должным образом, если я нажимаю кнопку "Выбрать все", выбирая все флажки, если я выбираю в отдельном флажке, а также выбираю все элементы.
Пожалуйста помоги.
Вы должны определить логическое свойство для списка emp, например, чтобы проверить, что ваш список emp имеет известную проверку свойства, отличную от имени.
Измените ngModel для флажков, как показано ниже.
<section class="example-section" *ngFor="let r of emp">
<mat-checkbox class="example-margin" [(ngModel)]="r.checked">{{r.name}}</mat-checkbox>
</section>
<mat-checkbox [(ngModel)]="checked" (click)="selectAll()">Select All</mat-checkbox>
И в конце добавьте функцию selectAll() к вашему компоненту, т.е.
selectAll() {
this.emp.forEach(element => {
element.checked = true;
});
}
Обновить
Для отмены выбора всех флажков вы можете добавить кнопку, как показано ниже.
<button (click)="unSelectAll()">UnSelect all</button>
unSelectAll() {
this.emp.forEach(element => {
element.checked = false;
});
}