Как осуществить выделение всего в мат-чекбокс угловой 5

1

Вот мой шаблон 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> 

Это код не работает должным образом, если я нажимаю кнопку "Выбрать все", выбирая все флажки, если я выбираю в отдельном флажке, а также выбираю все элементы.

Пожалуйста помоги.

Теги:
angular
angular5
angular-material-5

1 ответ

0
Лучший ответ
  1. Вы должны определить логическое свойство для списка emp, например, чтобы проверить, что ваш список emp имеет известную проверку свойства, отличную от имени.

  2. Измените ngModel для флажков, как показано ниже.

<section class="example-section" *ngFor="let r of emp">
  <mat-checkbox class="example-margin" [(ngModel)]="r.checked">{{r.name}}</mat-checkbox>  
</section>
  1. Для проверки всех флажков вы должны добавить функцию щелчка на флажок "Выбрать все", как показано ниже.

<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>
и добавьте его функцию в файл you'r ts, как показано ниже.
  unSelectAll() {
    this.emp.forEach(element => {
      element.checked = false;
    });
  }
  • 0
    Спасибо за ответ, есть ли способ отменить выбор всего, когда снят флажок выбрать все.
  • 0
    Я буду обновлять свой пост, пожалуйста, пометьте ответ, если это поможет :)
Показать ещё 4 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню