问题描述
我在上下文菜单中使用右键单击功能时遇到问题。由于第二个ngFor =“ let row”条件，我的菜单项没有显示...但是我需要右键单击所选的行对象，以便从该行传递json值。
现在弹出模式对话框，但是没有显示菜单项按钮，所以我无法使用click事件。
我在做什么错了？
view.component.html
=IMPORTFROMWEB(C2;C3;B4:C4)
view.component.ts
<!--Context Right Click Menu-->
<mat-menu #contextMenu="matMenu" #contextMenu2="matMenu">
<ng-container *ngFor="let funct of FunctionNames">
<ng-container *ngFor="let row">
<div mat-menu-item>
<button mat-menu-item (click)="onContextMenuAction(row)">{{funct}}</button>
</div>
</ng-container>
</ng-container>
</mat-menu>
<!--Context Right Click Menu-->
<mat-menu #contextMenu="matMenu" #contextMenu2="matMenu">
<ng-container *ngFor="let funct of FunctionNames">
<ng-container *ngFor="let row">
<div mat-menu-item>
<button mat-menu-item (click)="onContextMenuAction(row)">{{funct}}</button>
</div>
</ng-container>
</ng-container>
</mat-menu>
解决方法
第二个*ngFor不包含要循环的数组。如果您需要索引，则可以直接在第一个索引中获取索引
<mat-menu #contextMenu="matMenu" #contextMenu2="matMenu">
<ng-container *ngFor="let funct of FunctionNames">
<div mat-menu-item>
<button mat-menu-item (click)="onContextMenuAction(funct)">{{funct}}</button>
</div>
</ng-container>
</mat-menu>
组件
onContextMenuAction(funct) {
// you should get entire row data here
}
您正在尝试引用模板中的角度材料菜单数据。
您可以使用：let-refrenceName="dataItemKey"。
它将获得名为refrenceName的菜单数据，其键名为dataItemKey。
就您而言，它就像：let-row="row"
<mat-menu #contextMenu="matMenu">
<ng-template matMenuContent let-row="row">
<button mat-menu-item (click)="onContextMenuAction1(row)">Action 1</button>
<button mat-menu-item (click)="onContextMenuAction2(row)">Action 2</button>
</ng-template>
</mat-menu>
还要确保设置row菜单数据，如：
this.contextMenu.menuData = { 'row': yourValue };
所以您可以引用它。