Angular导航栏mat-menu内*ngIf判断失效问题求助

核心问题 #

• 所有的下拉触发按钮绑定了同一个mat-menu实例，你在*ngFor循环外部只定义了一个#menu1菜单，不管点击哪个导航按钮，打开的都是同一个菜单，内容自然完全一致。
• 现有菜单内部逻辑重复遍历全量dossiers列表，会把所有分类对应的下拉选项全部渲染出来，自然会显示全部选项。

修复步骤 #

1. 给触发按钮传递当前分类数据 #

修改导航按钮的绑定逻辑，点击时把当前的dossier数据传递给菜单：

<ul class="dossiers" *ngFor="let d of ongletservice.dossiers">
    <button mat-raised-button [matMenuTriggerFor]="menu1" [matMenuTriggerData]="{currentDossier: d}"> 
        {{d.titre}}
    </button>
</ul>

2. 重构菜单内容，接收参数过滤选项 #

修改mat-menu的结构，接收传入的当前分类参数，只过滤对应分类的下拉选项：

<mat-menu #menu1="matMenu">
  <!-- 接收触发按钮传入的当前分类数据 -->
  <ng-template matMenuContent let-currentDossier="currentDossier">
    <button 
      *ngFor="let dd of ongletservice.dropdowns" 
      *ngIf="dd.dossier === currentDossier.titre"
      id="btn-2" 
      mat-button 
      routerLink="../../{{dd.lien}}"
    >
      {{dd.titre}}
    </button>
  </ng-template>
</mat-menu>

额外优化建议 #

你现有代码里的id='btn-1'、id='btn-2'写在*ngFor循环中，会生成大量重复ID，不符合HTML规范，建议修改为动态ID或者直接移除固定ID。

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