Блог

У меня есть 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?

Это ссылка на Stackblitz с кодом: https://stackblitz.com/edit/angular-material-playground-hcw1wo?file=src/app/app.component.html

Вы можете попробовать мат-меню для вложенных пунктов меню:

 <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 mat-select для справки : https://material.angular.io/components/select/examples