Angular 13双层ngFor循环中MatMenu无法正常触发的问题

循环生成带子菜单的按钮时，MatMenu点击无反应的核心原因是重复的菜单标识导致Angular无法正确关联按钮与对应菜单。以下是具体解决步骤：

1. 为每个MatMenu设置唯一ID #

在双层ngFor循环中，结合循环索引或数据的唯一标识（比如操作ID）拼接出唯一的菜单ID，确保每个菜单实例都有独立标识：

<ng-container *ngFor="let operation of operations; let opIndex = index">
  <!-- 带子菜单的按钮 -->
  <button 
    mat-button 
    [matMenuTriggerFor]="subMenu"
    *ngIf="operation.subOperations?.length"
  >
    {{ operation.label }}
  </button>

  <!-- 关联的子菜单 -->
  <mat-menu 
    #subMenu="matMenu" 
    [id]="'operation-submenu-' + opIndex + '-' + operation.id"
  >
    <button 
      mat-menu-item 
      *ngFor="let subOp of operation.subOperations"
      (click)="onSubOperationClick(subOp)"
    >
      {{ subOp.label }}
    </button>
  </mat-menu>
</ng-container>

这里用外层循环的opIndex和operation.id组合生成唯一ID，彻底避免菜单标识冲突。

2. 用ID直接关联按钮与菜单（可选更稳妥方式） #

如果模板引用变量在循环中仍有歧义，可以直接通过ID绑定matMenuTriggerFor，跳过模板引用变量：

<ng-container *ngFor="let operation of operations; let opIndex = index">
  <button 
    mat-button 
    [matMenuTriggerFor]="'operation-submenu-' + opIndex + '-' + operation.id"
    *ngIf="operation.subOperations?.length"
  >
    {{ operation.label }}
  </button>

  <mat-menu [id]="'operation-submenu-' + opIndex + '-' + operation.id">
    <button 
      mat-menu-item 
      *ngFor="let subOp of operation.subOperations"
      (click)="onSubOperationClick(subOp)"
    >
      {{ subOp.label }}
    </button>
  </mat-menu>
</ng-container>

3. 额外排查点 #

• 确认当前模块已导入MatMenuModule和MatButtonModule，缺少模块会导致组件功能失效
• 检查operation.subOperations的数据结构，确保是有效数组（非空、非undefined）
• 移除循环内重复的模板引用变量，避免命名冲突

内容的提问来源于stack exchange，提问作者Justmaker