Angular 显示在页面外部的角垫菜单

我正在使用Angular 8开发一个应用程序，我想使用定制的上下文菜单。为此，我使用了材料v8.2.3，并尝试从中实现基本示例

但是，现在单击按钮时，上下文菜单显示在页面底部，而不是单击位置（或按钮上）。知道为什么会这样吗？（见附件）

与他们的示例非常相似，我只包含了必要的HTML（尝试将其包装在div中，但没有任何区别）：

菜单
项目1
项目2

我使用了与示例中使用的完全相同的导入和导出

---

非常感谢

没有空间显示

项目

，但您可以“播放”属性

xPosition

和

yPosition

<button mat-button [matMenuTriggerFor]="menu">Menu</button>
<mat-menu #menu="matMenu" yPosition="below">
  <button mat-menu-item>Item 1</button>
  <button mat-menu-item>Item 2</button>
</mat-menu>

菜单
项目1
项目2

您还可以使用

类

并设置

页边距顶部

你能在上面创建一个stackblitz[吗？

<button mat-button [matMenuTriggerFor]="menu">Menu</button>
<mat-menu #menu="matMenu" yPosition="below">
  <button mat-menu-item>Item 1</button>
  <button mat-menu-item>Item 2</button>
</mat-menu>