2

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

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

请帮忙。

4

2 回答 2

7

  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>

  1. 要检查所有复选框，您应该在 Select All 复选框中添加一个单击功能，如下所示。

<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;
    });
  }
于 2018-06-10T05:24:17.743 回答
1

我认为@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;
    });
  }
于 2020-06-09T07:14:52.683 回答