Angular - 复选框唯一选择

Question

在我的项目中，我创建了Select/ Unselect Checkbox functionality。同一页面上有多个different checkbox。如何分离 Select All Checkbox 功能，使其仅应用于其值。

Demo code https://stackblitz.com/edit/angular-material-select-all-bx4qen?file=src%2Fapp%2Fapp.component.html

注意 - 我的项目中至少有 8 个这样的单独复选框。我正在寻找最佳解决方案

Answer 1

您需要为每个复选框组设置不同的变量。但是既然你提到了，有很多复选框。

这是优化的解决方案。

引入一个数组来表示，这样如果你引入新的复选框，你需要在 html 上进行任何更改，你甚至可以为子复选框分离 ngModel。

export class AppComponent {
  selected: boolean = false;
  checkboxes: any = [
    {
      label: "First",
      root: false,
      create: false,
      update: false,
      delete: false
    },
    {
      label: "Second",
      root: false,
      create: false,
      update: false,
      delete: false
    },
    { label: "Third", root: false, create: false, update: false, delete: false }
  ];

  handeClick(checkbox): void {
    checkbox.root = !checkbox.root;
    checkbox.create = checkbox.root;
    checkbox.update = checkbox.root;
    checkbox.delete = checkbox.root;
  }
}

|<div *ngFor="let checkbox of checkboxes">
    <h2>{{checkbox.label}}</h2>
    <mat-checkbox (ngModelChange)="handeClick(checkbox)" [ngModel]="checkbox.root">Check/ Uncheck</mat-checkbox>

    <mat-checkbox [ngModel]="checkbox.create">Create</mat-checkbox>
    <mat-checkbox [ngModel]="checkbox.update">Update</mat-checkbox>
    <mat-checkbox [ngModel]="checkbox.delete">Delete</mat-checkbox>
</div>

这里是演示 - https://stackblitz.com/edit/angular-material-select-all-qoehwy?file=src%2Fapp%2Fapp.component.html