预填充角材料选择具有分组答案

【问题标题】：prepopulating Angular material select having grouping预填充角材料选择具有分组
【发布时间】：2019-12-24 01:21:24
【问题描述】：

我使用了角度材质选择

<mat-select [(ngModel)]="category"
            required>
  <mat-optgroup *ngFor="let group of categoryGroups"
                [label]="group.name">
    <mat-option *ngFor="let category of group.options"
                [value]="category.value" (onSelectionChange)="onCategorySelection($event, group.name)">
       {{category.viewValue}}
    </mat-option>
  </mat-optgroup>

</mat-select>

但在 UPDATE 表单的情况下会出现问题，它应该根据传递的数据预先填充。

由于有相同的类别值可能存在于另一个组中。

所以无法预填充 mat-select

因为 mat-select 没有分组的绑定：[value] = "category.value"

即应预先填充基于组选项请检查：

Demo

【问题讨论】：

标签： angular6 angular-material-6

【解决方案1】：

每个选项都必须具有唯一值。您可以将值设置为您想要的任何值 - 它不必是“类别”值。例如，您可以将组名添加到类别值：

[value]="group.name + '-' + pokemon.value"

【讨论】：