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

Question

我在上下文菜单中使用右键单击功能时遇到问题。我的菜单项没有显示，因为我的第二个ngFor=“let row”条件。。。但我需要右键单击选中的行对象，以便从该行传入json值。

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

我做错了什么？

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

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

Answer 2

您试图在模板中获得对角材料菜单数据的引用。

您可以使用：let refrenceName=“dataItemKey”来完成。

它将获得一个名为referencename的引用，指向键名为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>

还要确保将行菜单数据设置为：

this.contextMenu.menuData = { 'row': yourValue };

所以你可以参考它。

完整的实例