如何在 mat-checkbox angular 5 中实现全选答案

【问题标题】：How to implement select all in mat-checkbox angular 5如何在 mat-checkbox angular 5 中实现全选
【发布时间】：2018-06-10 04:59:49
【问题描述】：

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

【解决方案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>

要检查所有复选框，您应该在“全选”复选框中添加一个单击功能，如下所示。

&lt;mat-checkbox  [(ngModel)]="checked" (click)="selectAll()"&gt;Select All&lt;/mat-checkbox&gt;

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

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

更新

对于取消选择所有复选框，您可以添加如下按钮

&lt;button (click)="unSelectAll()"&gt;UnSelect all&lt;/button&gt;

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

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

【讨论】：

感谢您的回复，如果取消选中全选复选框，有什么方法可以取消全选。
我会更新我的帖子，如果有帮助请标记答案:)
它工作得差不多了，再次感谢，我面临的唯一问题，如果我点击取消全选，全选按钮仍然显示选中。
添加 this.checked = false;进入 unSelectAll() 函数。
嗨@Arash！我建议使用以下内容更新您的函数“selectAll”，以便在复选框上全选和取消全选：this.emp.forEach(element => { element.checked = element.checked ? false : true; });

【解决方案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;
    });
  }

【讨论】：