Question

这是我的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>

这是代码无法正常工作，如果我点击全选，它选中所有复选框，如果我选中了单独的复选框，它也选择所有项目。

请帮忙。

Answer 1

您应该为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;
    });
  }

Answer 2

我认为@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;
    });
  }

如何在mat-checkbox angular 5中实现select all

2 个答案: