我想将“全选”和“取消全选”按钮添加到具有分组划分的垫选择中。
我的代码在这里可用： 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()”函数。但是，只有第一个复选框被选中，即使 [ngModel] 显示该函数采用数组内的所有值。 我还需要使这个函数适用于其他三个数组。
我希望有人可以帮助我解决问题。 如果有更好的方法来实现我想要实现的目标，我也可以更改代码。
【问题讨论】：
* 我也请更新您的代码* 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-select> 中删除不必要的[(ngModel)]（你有两个）和[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>
<button mat-button (click)="selectAll(itemSelect)">Seleziona Tutti</button>
selectAll() 方法。在方法中删除参数数组和现有的 for 循环。现在我们将遍历设置的组数组并将每个组中每个项目的值添加到值数组中。稍后将提交此数组以更新所选值。该方法应如下所示：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
【讨论】：