Angular 7中*ngFor调用matMenuTrigger时菜单无法显示的问题

可能的问题原因 #

1. 手动触发与默认逻辑冲突：你在按钮上绑定了(mousedown)事件手动调用openMenu()，而Angular Material的matMenuTrigger本身默认通过click事件触发菜单打开。两种触发逻辑在循环渲染时可能因事件顺序冲突，导致菜单无法正常显示。
2. Angular 7版本潜在的模板变量作用域问题：虽然组件实例的模板变量理论上是独立的，但Angular 7中循环渲染时重复的模板引用变量（如#leagueMenu、#leagueMenuTrigger）可能存在识别异常。

解决方案 #

方案1：移除手动触发逻辑，依赖默认行为 #

删除按钮上的(mousedown)绑定和组件中的onMouseDown方法，让matMenuTrigger默认处理菜单触发：

修改后的组件HTML：

<button mat-menu-item
  #leagueMenuTrigger="matMenuTrigger"
  [matMenuTriggerFor]="leagueMenu">
  {{group.group_name}} 
</button>

<mat-menu #leagueMenu="matMenu">
<button mat-menu-item>
Club Home {{group.group_id}}
</button>
<button mat-menu-item>
Events    
</button>
<button mat-menu-item>
Player Roster    
</button>
<button mat-menu-item>
Results and Standings
</button>
<button mat-menu-item>
Ledger
</button>
<button mat-menu-item>
Club Settings
</button>
</mat-menu>

修改后的组件TS：

import { OnInit, Component, Input } from '@angular/core';
import { Group } from 'src/app/objects/group';

@Component({
  selector: 'wagl-league-menu',
  templateUrl: './league-menu.component.html',
  styleUrls: ['./league-menu.component.scss']
})
export class LeagueMenuComponent implements OnInit  {
  @Input() group: Group; 

  constructor() {}

  ngOnInit() {}
}

方案2：为每个菜单设置唯一标识（可选增强） #

如果方案1无效，可为每个mat-menu绑定唯一的id，确保Angular能正确识别每个菜单实例：

<button mat-menu-item
  #leagueMenuTrigger="matMenuTrigger"
  [matMenuTriggerFor]="leagueMenu">
  {{group.group_name}} 
</button>

<mat-menu #leagueMenu="matMenu" [id]="'league-menu-' + group.group_id">
<!-- 菜单内容保持不变 -->
</mat-menu>

额外检查点 #

• 确认leagues数组中的每个league对象都包含完整的group_name和group_id属性。
• 如果leagues是异步获取的Observable，需使用async管道：

  <wagl-league-menu *ngFor="let league of leagues | async" [group]="league"></wagl-league-menu>
  

内容的提问来源于stack exchange，提问作者Jean-Francois Bertrand