Angular MatMenu在双ngFor循环中不起作用

Question

使用Angular 13，我一直在尝试使用Angular MatMenu (https://material.angular.io/components/menu/overview)添加一个有条件显示的菜单。基本上一个栏显示按钮(操作)和一些可能有子操作。在本例中，我想在单击按钮时显示子操作。

这是我的基本代码，这是完整的html，因为在开始有另一个菜单。请注意，删除它不会改变行为。

<div class="rounded-box" *ngIf="!!selectedCategory">
<div class="selector" *ngIf="rateOrDislocationEnabled; else simpleAggregation">
<button color="primary" mat-button mat-icon-button [matMenuTriggerFor]="categoryMenu" class="dropdownButton">
<div class="dropdownText">{{ selectedCategory | agReplace: "_":" " }}</div>
<mat-icon class="dropdownIcon">arrow_drop_down</mat-icon>
</button>
<mat-menu #categoryMenu="matMenu" [overlapTrigger]="true" data-testid="categories-menu">
<button mat-menu-item *ngFor="let category of availableCategories" (click)="setSelectedCategory(category)">
<span [ngClass]="{ selectedLabel: isSelected(category) }">{{ category | agReplace: "_":" " }}</span>
<div *ngIf="category === BlockCategory.RATE_MAKING" class="alpha">ALPHA</div>
</button>
</mat-menu>
</div>
<ng-container *ngFor="let operationCategory of getOperations(); let lastItem = last">
<ng-container *ngFor="let operation of operationCategory">
<button *ngIf="operation.subOperations.length === 0"
mat-icon-button
class="iconWrapper"
id="operation-icon-{{ operation.value }}"
(click)="addOperation(operation.value)"
[disabled]="operation.disabled$ | async">
<mat-icon [ngClass]="operation.icon" class="icon" [agToolTip]="operation.tooltip$ | async"></mat-icon>
</button>
<ng-container *ngIf="operation.subOperations.length !== 0">
<button
mat-button
mat-icon-button
class="iconWrapper"
id="operation-menu-icon-{{ operation.value }}"
[matMenuTriggerFor]="subMenu">
<mat-icon [ngClass]="operation.icon" class="icon" [agToolTip]="operation.tooltip$ | async"></mat-icon>
</button>
<mat-menu #subMenu="matMenu">
<button mat-menu-item>Settings</button>
<button mat-menu-item>Log off</button>
</mat-menu>
</ng-container>
</ng-container>
<div class="divider" *ngIf="!lastItem"></div>
</ng-container>
</div>

我已经创建了一个重现问题的stackblitz: https://angular-ivy-cvv2xk.stackblitz.io

问题是，当我点击按钮，什么都没有发生。当我把按钮移出ngFor循环时，它会正常工作。我尝试过删除ngIf条件(所以所有按钮都是双倍的)，当点击它时没有显示菜单。所以"submenu"永远不会显示。

我想知道我是否需要使垫子菜单特定或给它一些id，以确保没有冲突?因为我对Angular有点陌生，所以我可能会错过一些东西。

Thanks in advance

Answer 1

触发子菜单的按钮有多个按钮标签。

<button
mat-button
mat-icon-button

可以删除一个然后再试一次吗?

编辑:

---

您使用<ng-container *ngFor="let operationCategory of getOperations();

如果你按下按钮，角将触发变化检测，这将再次触发你的getOperations()。这将导致这种行为，并且不会打开子菜单。

所以你应该尝试用async pipe(如果是这种情况)代替getOperations()或使用属性。