*ngFor 指令不显示 Angular 中右键单击上下文菜单的菜单项数据

Question

我在上下文菜单中使用右键单击功能时遇到问题。由于我的第二个 ngFor="let row" 条件，我的菜单项没有显示...但是我需要通过右键单击选择的行对象才能从行中传递一个 json 值。

现在模式正在弹出，但没有显示菜单项按钮，因此我无法使用点击事件。

我在这里做错了什么？

view.component.html

  <!--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>

view.component.ts

onContextMenuAction(row: any) {
        console.log(row);
 }

Answer 1

您正在尝试在模板中获取对角度材质菜单数据的引用。

您可以使用：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 };

所以你可以参考它。

Full live example

Answer 2

第二个*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 
}