带有悬停的 MatMenu 在打开的 MatMenu 下方显示 Button

Question

标题可能有点混乱。我会尽量解释清楚。

我有一个 mat-table，我在其中填充了数据。在每行的最后一列中，我显示了具有一些简单功能（如删除或编辑）的按钮。由于 table 在小屏幕上打开时变得非常笨拙，因此我添加了一个 mat-menu 按钮。

因为据我所知Angular Material不支持悬停功能所以我使用了这个。

当 table 中显示一个条目时，下拉菜单会按需要工作。一旦有多个行，下面一行中的 mat-menu 就会通过激活的 mat-menu 发光（见图）。

只要我想单击“删除”或“编辑”选项，就会激活下一行 mat-menu 的悬停。

这里是问题的一个小再现：StackBlitz

Answer 1

我检查了您在 StackBlitz 上提供的示例，很明显，所需行下方的 mat-menu 被激活，因为您只是将鼠标悬停在它上面。我希望我能很好地理解您的任务，因为您有两种解决方法：

1. 删除您在 <button> 中提供的 style="z-index:1050"，这会使 mat-menu 透明，或者
2. 只需删除悬停功能，因为您已经提供了一个要单击的按钮。