Angular导航菜单中*ngFor循环导致下拉菜单消失的问题

问题回顾 #

需要给导航栏的项目下拉菜单遍历项目数组，原本下拉菜单正常，但只要在导航菜单任意位置添加*ngFor循环，下拉菜单就会消失。尝试过以下操作均未解决：

• 在顶级<li>元素添加*ngFor，下拉菜单消失
• 用<ng-container>包裹代码并添加循环，下拉菜单同样消失
• 在<mat-menu>内添加循环，抛出错误：Property 'menu' does not exist on type 'NavMenuComponent'
• 给纯文本的<li>添加*ngFor，元素直接消失

解决方案 #

1. 先确认项目数组有效性 #

如果组件内的项目数组为空或未初始化，*ngFor不会渲染任何内容，视觉上就会呈现“消失”的效果。先在组件类中初始化测试数据验证：

// NavMenuComponent.ts
projects = [
  { id: 1, name: '项目A', route: '/project-user/1' },
  { id: 2, name: '项目B', route: '/project-user/2' }
];

2. 正确处理<mat-menu>模板引用变量作用域 #

报错的核心原因是*ngFor会改变模板变量的作用域，导致触发器无法找到对应的菜单。如果需求是单个下拉菜单展示所有项目，只需在菜单内部的菜单项上添加*ngFor，而非给外层<li>或<ng-container>加循环：

<!-- 正确的下拉菜单代码 -->
<li>
  <button mat-button [matMenuTriggerFor]="projectMenu">Project</button>
  <mat-menu #projectMenu="matMenu">
    <!-- 在菜单内部遍历项目数组生成选项 -->
    <button 
      mat-menu-item 
      class="nav-link text-dark" 
      *ngFor="let project of projects"
      [routerLink]="project.route"
    >
      {{ project.name }}
    </button>
  </mat-menu>
</li>

这里将菜单的模板引用变量设为projectMenu，确保触发器[matMenuTriggerFor]能正确绑定，同时在菜单内部循环生成项目选项。

3. 若需多导航项+各自下拉菜单的场景 #

如果要为每个项目生成独立的导航项和下拉菜单，需要给每个<mat-menu>生成唯一的引用变量，通过*ngFor的索引实现：

<li *ngFor="let project of projects; let i = index">
  <button mat-button [matMenuTriggerFor]="menu{{i}}">{{ project.name }}</button>
  <mat-menu #menu{{i}}="matMenu">
    <button mat-menu-item [routerLink]="['/project-detail', project.id]">详情</button>
    <button mat-menu-item [routerLink]="['/project-edit', project.id]">编辑</button>
  </mat-menu>
</li>

4. 检查组件类变量声明 #

确保组件类中已正确声明projects数组，无拼写错误：

// NavMenuComponent.ts
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-nav-menu',
  templateUrl: './nav-menu.component.html',
  styleUrls: ['./nav-menu.component.css']
})
export class NavMenuComponent implements OnInit {
  isExpanded = false;
  projects: any[] = [];

  ngOnInit() {
    // 可替换为从服务获取数据的逻辑
    this.projects = [
      { id: 1, name: '项目A', route: '/project-user/1' },
      { id: 2, name: '项目B', route: '/project-user/2' }
    ];
  }

  toggle() {
    this.isExpanded = !this.isExpanded;
  }
}

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