本文详解如何在 angular 中结合 *ngfor 与 angular material 的 mat-menu 组件，避免模板重复，通过 ng-container 和模板引用变量实现每个菜单独立触发与绑定。

本文详解如何在 angular 中结合 *ngfor 与 angular material 的 mat-menu 组件，避免模板重复，通过 ng-container 和模板引用变量实现每个菜单独立触发与绑定。

在 Angular 模板中，若需为一组动态数据（如筛选器列表）分别渲染独立的 mat-menu，直接使用 + [ngForOf] 并不可行——因为 本身不参与 DOM 渲染，其内部的模板引用变量（如 #i="matMenu"）无法被外部触发器正确识别，且 #i 在循环中会重复定义，导致绑定失效。

✅ 正确做法是使用 配合结构指令 *ngFor。 是一个逻辑容器，不产生真实 DOM 节点，但支持结构指令和模板引用变量作用域隔离，使每次循环都能创建独立、可识别的 mat-menu 实例及其触发器。

以下为推荐实现：

<ng-container filter of filters let i='index"'><button mat-button>
    {{ filter.title | translate }}
  </button>

  <mat-menu><button mat-menu-item option of filter.values>
      <span>{{ option }}</span>
    </button>
  </mat-menu></ng-container>

关键要点说明：

• 使用 *ngFor（而非 [ngForOf] + ），确保每次迭代都生成独立作用域；
• #menuRef="matMenu" 为每个 创建唯一局部引用变量（Angular 自动为每次循环创建新作用域，无需手动拼接索引）；
• [matMenuTriggerFor]="menuRef" 直接绑定该次循环中的 menuRef，无需 #i 或字符串 ID，语义清晰且类型安全；
• 触发器按钮必须与对应 处于同一 ng-container 内（即同级或子级），否则引用可能解析失败；
• 若需在组件类中控制菜单（如手动打开/关闭），可通过 @ViewChildren(MatMenuTrigger) triggers: QueryList 获取全部触发器实例。

⚠️ 注意事项：

• 不要使用 #i="matMenu" 并期望 [matMenuTriggerFor]="i" 在循环中生效——#i 是模板变量名，不是表达式，不能作为输入值传递；应始终使用 #ref="matMenu" + [matMenuTriggerFor]="ref" 的配对方式；
• 确保已导入 MatMenuModule 和 CommonModule（用于 *ngFor）；
• 若启用严格模板类型检查（strictTemplates），建议为 filters 提供明确类型（如 filter: Filter[]），提升可维护性。

此方案简洁、可扩展性强，适用于任意数量的动态菜单场景，是 Angular Material 官方推荐的最佳实践之一。