angular mat-select 全选多选

Question

我正在尝试全选以进行角度多项选择，它适用于一个选择，但是当您有超过 1 个选择时，我怎样才能使其工作？当我为第二个输入添加全选时，它会在第一个输入上全选

campaign.ts

  @ViewChild('mySel') skillSel: MatSelect;

  toggleAllSelection() {
    this.allSelected = !this.allSelected;

    if (this.allSelected) {
      this.skillSel.options.forEach( (item : MatOption) => item.select());
    } else {
      this.skillSel.options.forEach( (item : MatOption) => {item.deselect()});
    }
  }

campaign.html

  <mat-select #mySel multiple formControlName="Branch">
        <mat-option [value]="0" (click)="toggleAllSelection()">All items</mat-option>
        <mat-option *ngFor="let item of centers" [value]="item.centerCode">{{item.address}}</mat-option>
      </mat-select>

        <mat-select #mySel multiple formControlName="categoryDescriptions">
          <mat-option [value]="0" (click)="toggleAllSelection()">All items</mat-option>
          <mat-option *ngFor="let item of categories" [value]="item.description">{{item.description}}</mat-option>
        </mat-select>

Answer 1

问题是您有一个变量allSelected 来控制两个mat-select 框，并且您还为两个mat-select 框提供了相同的ID mySel。这就是为什么当您在第二个mat-select 中使用全选选项时，它会在第一个mat-select 上全选。

要解决此问题，请为每个 mat-select 分配不同的 ID，例如 mySelBranch 和 mySelCategory：

<mat-form-field appearance="fill">
  <mat-label>Branch</mat-label>
  <mat-select #mySelBranch [formControl]="branch" multiple>
    <mat-option [value]="0" (click)="toggleAllSelection(mySel)">All items</mat-option>
    <mat-option *ngFor="let branch of branchList" [value]="branch">{{branch}}</mat-option>
  </mat-select>
</mat-form-field>

<mat-form-field appearance="fill">
  <mat-label>Category</mat-label>
  <mat-select #mySelCategory [formControl]="categoryDescriptions" multiple>
    <mat-option [value]="0" (click)="toggleAllSelection(mySel2)">All items</mat-option>
    <mat-option *ngFor="let category of categoryList" [value]="category">{{category}}</mat-option>
  </mat-select>
</mat-form-field>

您会注意到我还将调用更改为 toggleAllSelection - 它现在将 mat-select 作为参数传递。

toggleAllSelection 已更改为：

toggleAllSelection(matSelect: MatSelect) {
    const isSelected: boolean = matSelect.options
      // The "Select All" item has the value 0, so find that one
      .filter((item: MatOption) => item.value === 0)
      // Get the value of the property 'selected' (this tells us whether "Select All" is selected or not)
      .map((item: MatOption) => item.selected)
      // Get the first element (there should only be 1 option with the value 0 in the select)
      [0];

    if (isSelected) {
      matSelect.options.forEach((item: MatOption) => item.select());
    } else {
      matSelect.options.forEach((item: MatOption) => item.deselect());
    } 
}

函数的第一部分查看作为参数传入的 mat-select 的选项，并找到值为 0 的选项（由于您定义 HTML 的方式，“全选”选项始终具有值0)。然后它获取属性名称selected 的值（这将是true 是“全选”被选中，如果被取消选中则为假）。由于这是一个数组，因此它使用[0] 获取第一项（由于使用了filter 函数，此时数组中应该只有一个项目：

const isSelected: boolean = matSelect.options
  .filter((item: MatOption) => item.value === 0)
  .map((item: MatOption) => item.selected)[0];

您的 TypeScript 类中不再需要以下变量：

@ViewChild("mySel") skillSel: MatSelect;
allSelected = false;

请参阅this StackBlitz 进行演示。