Как реализовать select all в матовом флажке angular 5

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

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

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


javascript angular angular5 angular-material-5
person mjck    schedule 10.06.2018    source источник

Ответы (2)


arrow_upward
7
arrow_downward

  1. Вы должны определить логическое свойство для списка emp, что-то вроде checked, теперь ваш список 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>
and add its function in you'r ts file like below

  unSelectAll() {
    this.emp.forEach(element => {
      element.checked = false;
    });
  }
person Arash    schedule 10.06.2018
comment
Спасибо за ответ, есть ли способ отменить выбор всего, если снять флажок «Выбрать все». - person mjck; 10.06.2018
comment
Я обновлю свой пост, пожалуйста, отметьте ответ, если он поможет :) - person Arash; 10.06.2018
comment
он работает почти нормально, еще раз спасибо, единственная проблема, с которой я столкнулся, если я нажму на кнопку «Отменить выбор всего», кнопка «Выбрать все» по-прежнему показывает выбранное. - person mjck; 10.06.2018
comment
добавить this.checked = false; в функцию unSelectAll(). - person Arash; 10.06.2018
comment
Привет @Араш! Я бы предложил обновить вашу функцию selectAll следующим содержимым, чтобы можно было выбрать все и отменить выбор всего в флажке: this.emp.forEach(element => { element.checked = element.checked ? false : true; }); - person mr3k; 09.06.2020

arrow_upward
1
arrow_downward

Я думаю, что предложение @Arash очень хорошее.

Просто обновите его функцию "selectAll", чтобы также иметь возможность отменить выбор:

this.emp.forEach(element => {
  element.checked = element.checked ? false : true;
});

Другой вариант - проверить, какое значение имеет флажок «выбрать все»:

  public selectAll() {
    var value = this.checked ? false : true;
    this.emp.forEach(element => {
      element.checked = value;
    });
  }
person mr3k    schedule 09.06.2020