如何实现 select all in mat-checkbox angular 5

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>

这是代码无法正常工作，如果我单击 select 全部，它 select 选中所有复选框，如果我 select 选中单个复选框，它也selecting 所有项目。

请帮忙。

Answer 1

你应该为 emp 列表定义一个布尔值属性类似 checked 现在你的 emp 列表有一个属性已知检查其他比名字。
更改复选框的 ngModel，如下所示

<section class="example-section" *ngFor="let r of emp">
  <mat-checkbox class="example-margin" [(ngModel)]="r.checked">{{r.name}}</mat-checkbox>  
</section>

要选中所有复选框，您应该向 Select 所有复选框添加点击功能，如下所示。

<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>

并将其功能添加到您的 ts 文件中，如下所示

  unSelectAll() {
    this.emp.forEach(element => {
      element.checked = false;
    });
  }

Answer 2

我觉得@Arash的建议很好

只需更新他的功能 "selectAll" 也可以取消选择：

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

另一种选择是检查 "select all" 复选框的值：

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

如何实现 select all in mat-checkbox angular 5

How to implement select all in mat-checkbox angular 5

javascript

angular

angular5

angular-material-5