Question

我想将按钮“全选”和“取消全选”添加到具有组划分的垫选中。

我的代码在这里可用： https://stackblitz.com/edit/angular5-selectall-with-groups?file=app/select-reset-example.html

此代码基于此工作演示，通过简单的Mat选择即可： https://stackblitz.com/edit/angular-material-select-multi-c6vtux?file=app%2Fapp.component.ts

在我的代码中，我需要循环遍历4个数组，因此我开始测试第一个数组的“ selectAll（）”函数。但是，即使[ngModel]显示函数采用了数组内部的所有值，也仅选择了第一个复选框。我还需要使此函数适用于其他三个数组。

我希望有人可以帮助我解决问题。如果有更好的方法来实现我想要实现的目标，那么我也可以更改代码。

Answer 1

您需要执行以下操作：

从[(ngModel)]中删除不必要的[compareWith]（您有两个）和<mat-select>：

<mat-select placeholder="State2" multiple [(ngModel)]="modelGroup" #itemSelect="ngModel">...</mat-select>

代替为每个带有正则表达式的选项组创建一个数组，您可以创建一个名为groups的单个数组，该数组如下所示：

groups: any[] = [
    {
      name: 'ETHERNET',
      items: [
        {
          label: "640K",
          value: "BS640KB_ETHERNET",
          defaultValue: true
        },
        {
          label: "7MB",
          value: "BS7MB_ETHERNET",
          defaultValue: true
        },
        {
          label: "7MB NOQinQ",
          value: "BS7MB_ETHERNET_NOQinQ",
          defaultValue: true
        },
        {
          label: "20MB",
          value: "BS20MB_ETHERNET",
          defaultValue: true
        }
      ]
    },
    {
      name: 'ATM',
      items: [
        {
          label: "640K",
          value: "BS640K_ATM",
          defaultValue: true
        },
        {
          label: "7MB",
          value: "BS7M_ATM",
          defaultValue: true
        },
        {
          label: "20MB",
          value: "BS20M_ATM",
          defaultValue: true
        }
      ]
    },
    {
      name: 'ETH',
      items: [
        {
          label: "2MB",
          value: "BS2MB_SHDSL_ETH",
          defaultValue: true
        },
        {
          label: "4MB IMA",
          value: "BS4MB_SHDSL_ETH_IMA",
          defaultValue: true
        },
        {
          label: "6MB IMA",
          value: "BS6MB_SHDSL_ETH_IMA",
          defaultValue: true
        },
        {
          label: "8MB IMA",
          value: "BS8MB_SHDSL_ETH_IMA",
          defaultValue: true
        }
      ]
    },
    {
      name: 'SHDSL ATM',
      items: [
        {
          label: "2MB",
          value: "BS2MB_SHDSL",
          defaultValue: true
        },
        {
          label: "4MB B",
          value: "BS4MB_SHDSL_B",
          defaultValue: true
        },
        {
          label: "4MB IMA",
          value: "BS4MB_SHDSL_IMA",
          defaultValue: true
        },
        {
          label: "6MB IMA",
          value: "BS6MB_SHDSL_IMA",
          defaultValue: true
        },
        {
          label: "8MB IMA",
          value: "BS8MB_SHDSL_IMA",
          defaultValue: true
        }
      ]
    }
  ];

此外，您可以删除所有其他数组，正则表达式，您的createCatArray()和equals()方法。

现在我们可以清理模板。继续并删除所有现有的<mat-optgroup>。现在添加一个单独的<mat-optgroup>，它遍历设置数组groups并呈现如下所示的对应项：

<mat-optgroup *ngFor="let group of groups" [label]="group.name">
   <mat-option *ngFor="let item of group.items" [value]="item.value">
      {{item.label}}
   </mat-option>
</mat-optgroup>

立即删除在“全选”按钮上设置的参数：

<button mat-button (click)="selectAll(itemSelect)">Seleziona Tutti</button>

现在最后一步是更改selectAll()方法。在方法内，删除参数数组和现有的for循环。现在，我们将遍历设置组数组并将每个组中每个项目的值添加到values数组中。稍后将提交此数组以更新所选值。该方法应如下所示：

selectAll(select: NgModel) {
  let values: any[] = [];

  for(let group of this.groups){
    for(let item of group.items){
      values.push(item.value);
    }
  }

  select.update.emit(values);
}

基本上，我们执行了以下操作：

创建了一个包含多个组的数组，其中进一步包含该组的名称和属于该组的项目。
在组数组中循环以在html模板中呈现组及其对应的项目。
添加了全选方法，该方法遍历所有组项目并将其值添加到数组中，该数组将在以后提交以更新选择。

这是正在运行的应用程序：

https://stackblitz.com/edit/angular5-selectall-with-groups-knptuu

Answer 2

*我也请更新您的代码* https://stackblitz.com/edit/angular5-selectall-with-groups?file=app%2Fselect-reset-example.ts

HTML代码是这样的

 <form [formGroup]="roleForm " (ngSubmit)="onSubmit(roleForm .value)">

     <!-- Multi Select Mat Start -->
              <mat-form-field class="example-full-width">

                <mat-select placeholder="Select Privileges"  #selectedValues  class="filter-select" formControlName="privilegeMultiselect" 
                  multiple required >
                  <mat-option disabled="disabled" class="filter-option">
                    <button mat-raised-button class="mat-primary fill text-sm" (click)="selectAll(dropdownList)">
                      Select All 
                    </button>
                    <button  mat-raised-button class="mat-primary fill text-sm eta-margin-all" (click)="deselectAll()">
                      Deselect All
                    </button>
                  </mat-option>
                  <mat-option *ngFor="let privilege of dropdownList" [value]="privilege.id">{{privilege.itemName}}</mat-option>
                </mat-select>

              </mat-form-field>
              <!-- Multi select mat end -->

    </form>

使用ngoninit方法创建表单生成器

this.roleForm = this._formBuilder.group({
      privilegeMultiselect: []

    })

这些是您选择价值的方法

selectAll(list) {

    this.roleForm.get('privilegeMultiselect').patchValue(list)
  }
  deselectAll() {
    this.roleForm.get('privilegeMultiselect').patchValue([])
  }

添加全选按钮以使用mat-optgroup进行mat-select

2 个答案: