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

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

0 голосов
/ 10 июня 2018

Вот мой 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>

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

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

1 Ответ

0 голосов
/ 10 июня 2018

  1. Вы должны определить логическое свойство для списка emp что-то вроде флажок теперь в вашем списке emp есть проверка известного свойства, отличная от name.

  2. Измените 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;
    });
  }

update

Чтобы снять все флажки, вы можете добавить кнопку, как показано ниже 

<button (click)="unSelectAll()">UnSelect all</button>
и добавьте его функцию в ваш файл, как показано ниже 
  unSelectAll() {
    this.emp.forEach(element => {
      element.checked = false;
    });
  }
...