创建3级（多级）下拉角度

Question

如何以角度创建3个级别的下拉选项。我们可以利用角材料吗？

<h4>mat-select</h4>
<mat-form-field>
  <mat-label>Pokemon</mat-label>
  <mat-select [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">
        {{pokemon.viewValue}}
      </mat-option>
    </mat-optgroup>
  </mat-select>
</mat-form-field>





The above code has two level. But how can we make it to the  3 level. 
   Something like, 
   Label1 -> Option1 -> option1.1 and option1.2  
   Label1 -> Option2 -> option1.1 and option1.2 
   Label2 -> Option2 -> option1.1 and option1.2

VolumeMetrics -> [IOPS, Kbps] -> [Read, Write] 如何通过3个级别实现这种下拉？

有什么帮助吗？

我们可以使用html / angular中的任何一个，但是使用有角度的材质会很好吗？

Answer 1

考虑结合 - mat-select 和 mat-menu 组件来实现下拉菜单，以便它可以容纳我们上面预期的多层次。

演示 - https://stackblitz.com/edit/mat-select-menu

这里我禁用了 mat-select 并在下拉菜单中点击显示多级 mat-menu。一旦用户从菜单中选择任何项目，我们就会将值设置为下拉列表。

我知道这有点非常规方法，但是如果它满足要求，您可以考虑采用这种方法。