mat-menu总是出现在页面末尾 [英] The mat-menu always appears at page end

问题描述

我从有角度的材料中实现了 mat-menu ，并且菜单始终显示在页面末端(以下代码):

I implemented the mat-menu from angular material and the menu always appears at the page-end (code-below):

我尝试设置 z-index 和其他 css 属性，但是菜单不在原本应有的位置

I have tried setting z-index and other css properties but the menu does not come where it originally should

HTML

<button mat-button [matMenuTriggerFor]="main_menu">My menu</button>

      <mat-menu #main_menu="matMenu">
        <ng-container *ngFor="let mainItem of objectKeys(my_menu)">
          <button mat-menu-item [matMenuTriggerFor]="sub_menu">{{ mainItem }}</button>
          <mat-menu #sub_menu="matMenu">
             <button *ngFor="let subItem of my_menu[mainItem]" mat-menu-item>{{ subItem }}</button>
          </mat-menu>
        </ng-container>
      </mat-menu>



@Input() objectKeys = Object.keys;
  @Input() my_menu = {
    'main1': ['sub1', 'sub2'],
    'main2': ['sub1', 'sub2', 'sub3'],
  };

我希望菜单在单击时会出现在按钮周围

I expect the menu to appear around the button when clicked

推荐答案

遇到类似的问题.对我来说，解决方法是-添加@import'~@angular/material/prebuilt-themes/deeppurple-amber.css';样式.

Faced similar issue.for me the solution was - adding @import '~@angular/material/prebuilt-themes/deeppurple-amber.css'; to styles.

这篇关于mat-menu总是出现在页面末尾的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！