如何解决* 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 };
所以您可以引用它。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。