触发带有对象数组的动态生成的菜单

Question

我想为应用程序创建一个侧边栏。我有一个来自后端的对象数组。我正在尝试使用mat-Menu组件来实现这一点。当我将鼠标悬停在模块上时，将打开菜单（子模块）。但是，当我将鼠标悬停在动态创建的菜单上时，它不会刷新。换句话说，除非已手动打开已打开的菜单，否则不会触发其他菜单。以下是我的代码段。通常，当我将鼠标悬停在菜单上时，我需要将其打开，并且所有已打开的菜单都应关闭。

    <div class="float-left mt-4 pt-2 sidebar">
  <div *ngFor="let list of app_feature_list; let i=index">
    <div class="sidemenu-container">
      <div #menuTrigger="matMenuTrigger" [matMenuTriggerFor]="menu" (mouseenter)="menuTrigger.openMenu()" [matMenuTriggerData]="{name: list.modules}" class="p-4"> 
         <i class="fa {{list.class}} {{list.groupIcon}} custom-icon"></i>
        </div>
    </div>

<mat-menu class="ml-5" #menu="matMenu" [overlapTrigger]="true" `enter code here`xPosition="after" yPosition="below">
            <ng-template matMenuContent let-name="name">
              <div (mouseleave)="menuTrigger.closeMenu()">
                 <mat-action-list  *ngFor="let module of name; let i=index">
                    <mat-list-item>{{module.feature_name}}</mat-list-item>
                    <mat-divider></mat-divider>
                </mat-action-list>
              </div>
              </ng-template>
        </mat-menu>
  </div>
</div>