Angular中动态配置mat-menu及对应触发项的实现难题

你的问题核心在于两个独立的*ngFor循环导致模板引用变量冲突：第一个循环里的所有按钮都绑定了#dateSubmit，但第二个循环生成了多个同名的#dateSubmit模板变量，Angular无法区分，最终所有按钮都会绑定到最后一个（或第一个）生成的菜单，导致无法触发独立菜单。

修复方案 #

将按钮和对应的mat-menu放在同一个*ngFor循环中，让每个按钮与菜单处于同一作用域，避免模板变量冲突：

<ng-container *ngFor="let input of filterInputs">
  <!-- 当前循环项的触发按钮 -->
  <button class="child-menu" mat-menu-item [matMenuTriggerFor]="menu" disableRipple>
    <span class="filter-type-label">{{ input.label }}</span>
  </button>

  <!-- 当前循环项对应的独立菜单 -->
  <mat-menu #menu="matMenu">
    <date-filter 
      class="full" 
      <!-- 可选：传递当前input信息给组件，方便区分事件来源 -->
      [filterInput]="input"
      (dateSelected)="applyFilter($event, input)" 
      prevent-menu-close>
    </date-filter>
  </mat-menu>
</ng-container>

额外优化 #

如果需要在applyFilter方法中区分是哪个过滤器触发的日期选择，可以修改方法接收input参数：

applyFilter(dateEvent: any, filterInput: any) {
  // 根据filterInput的标识处理对应过滤器的逻辑
  console.log(`处理${filterInput.label}的日期选择:`, dateEvent);
}

这样就能实现每个按钮触发独立的菜单模板，且能准确区分事件来源。

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