使用 mat-optgroup 将 select 所有按钮添加到 mat-select

Question

我想将按钮 "select all" 和 "deselect all" 添加到带有分组划分的垫子 select 中。

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

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

在我的代码中，我需要遍历 4 个数组，所以我开始测试第一个数组的 "selectAll()" 函数。然而，只有第一个复选框被 selected，即使 [ngModel] 显示该函数采用数组内的所有值。我还需要让这个函数适用于其他三个数组。

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

Answer 1

* 我也请更新您的代码* 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: []

    })

这些是你select你的价值的方法

selectAll(list) {

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

Answer 2

您需要执行以下操作：

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

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

现在删除您在 Select 全部按钮上设置的参数：

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

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

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 模板中的相应项目。
添加了一个 select all 方法，该方法循环遍历所有组项目并将它们的值添加到稍后将提交以更新 selection 的数组中。

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

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

使用 mat-optgroup 将 select 所有按钮添加到 mat-select

Add select all button to mat-select with mat-optgroup

angular

angular5