时间戳

首页 > 解决方案 > *ngFor 指令不显示 Angular 中右键单击上下文菜单的菜单项数据

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

问题描述

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

标签： javascriptangulartypescriptangular-materialcontextmenu

解决方案

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

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

所以你可以参考它。

完整的现场示例

推荐阅读