Angular material group下拉列表 - 如何将组名添加到文本框

Question

我有一个材料组下拉列表，就像官方文档（here）一样。

问题是：如何显示所选项目文本以及组名称。

即;如果我从＆＃39; Grass＆＃39;中选择Bulbasaur？小组，如图中所示，它应该显示＆＃39; Grass - Bulbasaur＆＃39;而不只是Bulbasaur＆＃39;。有什么想法吗？

更新：我找到了解决方法。任何摆弄相同问题的人都可以在同一时间做这个css hack，

<mat-form-field>
 <mat-select placeholder="Pokemon" [formControl]="pokemonControl">
  <mat-option>-- None --</mat-option>
   <mat-optgroup *ngFor="let group of pokemonGroups" [label]="group.name"
              [disabled]="group.disabled">
    <mat-option *ngFor="let pokemon of group.pokemon" [value]="pokemon.value">
     <span style=display:none">{{group.name}} -</span>{{ pokemon.viewValue }}
    </mat-option>
  </mat-optgroup>
 </mat-select>
</mat-form-field>

Answer 1

执行此操作的正确方法似乎是设置“自定义触发文字” ：

See the examples for the MatSelect instead of the overview

所以您将执行以下操作：

<mat-form-field>
  <mat-select placeholder="Pokemon" [formControl]="pokemonControl">
    <mat-select-trigger *ngIf="pokemonControl.value; let pokemon">
      {{ pokemon.parentViewValue }} : {{ pokemon.viewValue }}
    </mat-select-trigger>
    <mat-option>-- None --</mat-option>
    <mat-optgroup *ngFor="let group of pokemonGroups" [label]="group.name"
                  [disabled]="group.disabled">
      <mat-option *ngFor="let pokemon of group.pokemon" [value]="pokemon">
        {{pokemon.viewValue}}
      </mat-option>
    </mat-optgroup>
  </mat-select>
</mat-form-field>

注意两件事：

1. 显然是 mat-select-trigger 标签...我使用的是完整的神奇宝贝模型，您将需要添加对父级组的引用，或者像我一样，添加每个口袋妖怪的父视图值。您可以在实际构建模型时进行任何操作
2. 我对 mat-option 标签的 [值] 是pokemon而不是pokemon.value，因为我需要完整的模型