Angular for循环中的Mat菜单：性能问题

我想使用Angular中Material的mat菜单作为下拉指令，并找到了一种操作它的方法，以便它能够满足我们应用程序的需要（请参见此处的相关问题：）

现在，我将mat菜单集成到我们的组件中。但是菜单的打开和关闭非常缓慢。这可能与mat菜单位于for循环的子组件内有关，因此将生成许多mat菜单

我创建了一个stackblitz来显示问题：

第一个“测试”是一个mat菜单，它不在for循环内。在这里，它在合理的时间打开和关闭

“bla-bla”菜单位于一个循环内。当你点击它们时，你会发现有时候一个垫子菜单在开始时也会打开，要关闭菜单，你需要点击两次。我认为发生这种情况是因为您需要为每个菜单单击以关闭它

现在我认为这是因为每个菜单都有相同的模板名（尽管我读到mat菜单在循环中时这不是问题，因为每个菜单都有自己的作用域）

我还尝试使用ng容器来包围循环，但这也没有提高性能

---

有人知道我可以做些什么来提高性能，或者可以为Angular（5）下拉菜单提供不同的选择吗？

我在这里没有看到任何性能问题，脚本已在几秒钟内加载，并在单击其他菜单时将您的问题指向第一个菜单打开的位置，因为您不需要从任何方法打开菜单，它的默认功能是打开菜单选项。我已经更新了下面的代码，请检查。从输入类型中删除somemthod函数，或者您可以执行除触发器打开之外的任何其他功能

   <span mat-icon-button #notificationMenuBtn 
    [matMenuTriggerFor]="menu1">
    test test
   </span>
   <mat-menu #menu1="matMenu" (click)="$event.stopPropagation()" 
    [xPosition]="'after'" [overlapTrigger]="false">
    <input (mouseenter)="someMethod1()" 
     (click)="$event.stopPropagation()"><button 
     (click)="$event.stopPropagation()">OK</button>
   </mat-menu>

   <div *ngFor="let i of loop">
    <span mat-icon-button #notificationMenuBtn 
     [matMenuTriggerFor]="menu">
      bla bla
    </span>
    <mat-menu #menu="matMenu" (click)="$event.stopPropagation()" 
     [xPosition]="'after'" [overlapTrigger]="false">
       <input (mouseenter)="someMethod2()" 
       (click)="$event.stopPropagation()"><button 
       (click)="$event.stopPropagation()">OK</button>
    </mat-menu>
    <br>
  </div>

测试
好啊
布拉布拉
好啊

对不起，我完全忘记了会触发打开菜单的方法。。谢谢你的意见！我需要看看应用程序，然后为什么它是如此缓慢。