Angular 角垫选择“全部选择”用于多个选择

我正在尝试对角度多重选择执行“全选”，它对一个选择有效，但当您有多个选择时，如何使其有效？当我为第二次输入添加全选时，它会在第一次输入时全选

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>

所有项目
{{item.address}
所有项目
{{item.description}

问题是您有一个单一变量

allSelected

来控制两个

mat-select

框，并且您还为两个

mat-select

框指定了相同的

mySel

ID。这就是为什么当您在第二个

mat select

中使用全选选项时，它会在第一个

mat select

中选择全部

要解决此问题，请为每个

mat select

指定一个不同的ID，例如

mySelBranch

和

myselcontegory

：

<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>

函数的第一部分查看作为参数传入的

mat select

的选项，并找到值为

0

的选项（由于您定义HTML的方式，“全选”选项始终具有值

0

）。然后获取属性名的值

selected

（如果选择了“全选”，则为

true

，如果取消选择，则为false）。由于这是一个数组，因此它使用

[0]

来获取第一个项目（由于使用了

过滤器

功能，此时数组中应该只有一个项目：

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

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

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

---

请参阅演示。

对于mat，选择全选并取消全选尝试解决方案。嘿，谢谢你的回答我也尝试了这个，但我有同样的问题，当你有多个选择时，我如何才能使这个工作正常？我已经为这个答案打开了一个问题，谢谢你的回答！当我提交我的表单值s时，还有一个问题全选（0）是在json数组中提交的，我如何删除它并使用其他选项值提交表单？不确定表单是如何设置的，但在我的StackBlitz中，表单字段值包含0以及勾选“全选”时的其他值。如果对您来说也是这样，您可以通过执行

this.branch.value.filter（v=>v！==0）来删除0

查看当您单击submit按钮时调用的

submit（）

函数

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