matMenuTrigger openMenu 在使用 *ngFor

Answer 1

当您使用 ngFor 指令与组件的多个实例调用 LeagueMenuComponent 时，可能会出现与尝试管理相同 mat-menu 的多个 MatMenuTrigger 实例相关的问题。 MatMenuTrigger 实例用于控制菜单的打开和关闭，当您有多个组件实例时，它们可能会相互冲突。

要处理这种情况，您可以使用 ViewChild 装饰器来获取 LeagueMenuComponent 的每个实例中对 MatMenuTrigger 的引用。这样，每个实例都可以管理自己的 MatMenuTrigger。

以下是修改 LeagueMenuComponent 以使其在 ngFor 循环中工作的方法：

import { OnInit, Component, Input, AfterViewInit, ViewChild } from '@angular/core';
import { MatMenuTrigger } from '@angular/material/menu';
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, AfterViewInit {
  @Input() group: Group;
  @ViewChild(MatMenuTrigger) leagueMenuTrigger: MatMenuTrigger; // Get a reference to the MatMenuTrigger

  constructor() {}

  ngOnInit() {}

  ngAfterViewInit() {
    // This method is called after the view has been initialized.
    // It's a good place to perform additional setup that requires the view to be ready.

    // Now you can access the leagueMenuTrigger instance and use it as needed.
  }

  onMouseDown() {
    // This method can be used for any specific mouse down logic if needed.
    // Since we have a reference to leagueMenuTrigger, we can use it here.
    console.log(this.leagueMenuTrigger.menuOpen); // Logs the current menuOpen state
    this.leagueMenuTrigger.openMenu(); // Opens the menu.
  }
}

Answer 2

这是我解决问题的方法：

<ng-container 
    *ngFor="let league of leagues; trackBy: trackList" [attr.id]="league.group_id">
    <wagl-league-menu [group]="league" [attr.id]="'league'+league.group_id"></wagl-league-menu>
</ng-container>

使用 trackBy 似乎已经解决了这个问题。