如何在 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> 

这是代码工作不正常，如果我点击全选，它选择所有复选框，如果我选择单个复选框，它也选择所有项目。

请帮忙。

Answer 1

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>

3. 要选中所有复选框，您应该向“全选”复选框添加一个点击功能，如下所示。

<mat-checkbox  [(ngModel)]="checked" (click)="selectAll()">Select All</mat-checkbox>

最后将 selectAll() 函数添加到您的组件中，即

  selectAll() {
    this.emp.forEach(element => {
      element.checked = true;
    });
  }

更新

要取消选择所有复选框，您可以添加如下所示的按钮

  selectAll() {
    this.emp.forEach(element => {
      element.checked = true;
    });
  }

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

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