* ng对于指令不显示右键菜单的菜单项数据

问题描述

我在上下文菜单中使用右键单击功能时遇到问题。由于第二个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 };

所以您可以引用它。

Full live example