ANGULAR - 打开垫子菜单时如何保持选择下拉菜单打开？答案

【问题标题】：ANGULAR - How to keep select dropdown opened when opening mat-menu?ANGULAR - 打开垫子菜单时如何保持选择下拉菜单打开？
【发布时间】：2021-03-18 14:22:10
【问题描述】：

我有一个包含自定义选项的mat-select 组件（带有附加菜单“设置为默认值”）：

<mat-form-field appearance="fill">
  <mat-label>Favorite food</mat-label>
  <mat-select>
    <mat-option *ngFor="let food of foods" [value]="food.value">
      {{food.viewValue}}
      <button mat-icon-button [matMenuTriggerFor]="menu" aria-label="Example icon-button with a menu">
        <mat-icon>more_vert</mat-icon>
      </button>
      <mat-menu #menu="matMenu">
        <button mat-menu-item>
          <span>Set as default</span>
        </button>
      </mat-menu>
    </mat-option>
  </mat-select>
</mat-form-field>

但是，当我打开菜单时，选择选项列表消失了，我只能看到“设置为默认值”弹出窗口。

我们能否以某种方式在选择选项列表顶部显示“设置为默认值”，或者在 Angular Material 中这是不可能的？

这是 Stackblitz 的链接，代码为：https://stackblitz.com/edit/angular-material-playground-hcw1wo?file=src/app/app.component.html

【问题讨论】：

标签： javascript css angular angular-material material-ui

【解决方案1】：

您可以尝试 mat-menu 嵌套菜单项：

<button mat-raised-button [matMenuTriggerFor]="main_menu">Favorite food</button>
<mat-menu #main_menu="matMenu">
  <ng-container *ngFor="let food of foods">
    <button mat-menu-item [matMenuTriggerFor]="sub_menu">{{ food.value }}</button>
    <mat-menu #sub_menu="matMenu">
       <button mat-menu-item>Set as default</button>
    </mat-menu>
  </ng-container>
</mat-menu>

或尝试mat-optgroup of mat-select 参考：https://material.angular.io/components/select/examples

【讨论】：