Angular中用ng-template+ngFor实现mat-menu的触发问题求助

你的问题出在模板引用变量的使用方式：你试图用循环的index（let-i="index"）作为模板引用变量名（#i="matMenu"），但Angular不支持动态生成模板引用变量名——模板引用变量是静态编译的，循环中重复声明同名变量会导致作用域冲突，最终所有触发器无法正确关联到对应的菜单。

正确实现方式 #

直接在循环体内使用局部模板引用变量，利用ngFor的上下文隔离特性，每个循环项的模板引用变量都是独立的：

方式1：使用*ngFor语法糖（更简洁）

<div *ngFor="let filter of filters()">
  <button mat-button 
          [matMenuTriggerFor]="filterMenu" 
          #trigger="matMenuTrigger">
    {{ filter.title | translate }}
  </button>

  <mat-menu #filterMenu="matMenu">
    <button mat-menu-item 
            *ngFor="let option of filter.values" 
            [value]="option">
      <span>{{ option }}</span>
    </button>
  </mat-menu>
</div>

方式2：使用ng-template显式循环

如果你一定要用<ng-template>的ngFor写法，逻辑完全一致：

<ng-template ngFor let-filter [ngForOf]="filters()">
  <button mat-button 
          [matMenuTriggerFor]="filterMenu" 
          #trigger="matMenuTrigger">
    {{ filter.title | translate }}
  </button>

  <mat-menu #filterMenu="matMenu">
    <button mat-menu-item 
            *ngFor="let option of filter.values" 
            [value]="option">
      <span>{{ option }}</span>
    </button>
  </mat-menu>
</ng-template>

原理说明 #

在ngFor的每个循环实例中，模板引用变量（比如#filterMenu）的作用域被限制在当前循环项内，每个触发器都会自动关联到同一项内的mat-menu，不需要额外的唯一标识——Angular已经通过循环上下文帮你隔离了每个菜单的作用域。

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