问题描述
我正在Angular中建立一个动态菜单,而我的菜单仅显示数组中的第一个值.
I'm building a dynamic menu in Angular and my menu is only showing the first value in the array.
如何使其动态显示数组中的所有值?我在做什么错了?
How can I make it dynamically show all of the values in the array? What am I doing wrong?
在本地存储中设置了数组
Array is set in the local storage
阵列代码
FunctionNames: string[];
FunctionsActive: boolean[];
this.FunctionNames = JSON.parse(localStorage.getItem('FunctionNames'));
View.component.html
<!--Context Right Click Menu-->
<mat-menu #contextMenu="matMenu" #contextMenu2="matMenu">
<ng-container *ngFor="let function of FunctionNames">
<ng-template matMenuContent let-action="action">
<button mat-menu-item (click)="onContextMenuAction(action)">{{function}}</button>
</ng-template>
</ng-container>
</mat-menu>
View.component.ts
onContextMenu(event: MouseEvent, action: ViewDataSource) {
event.preventDefault();
this.contextMenuPosition.x = event.clientX + 'px';
this.contextMenuPosition.y = event.clientY + 'px';
this.contextMenu.menuData = { action: action };
this.contextMenu.menu.focusFirstItem('mouse');
this.contextMenu.openMenu();
}
onContextMenuAction(action: ViewDataSource ) {
this.launchService.launchAction(parseInt(action[0]), parseInt(action[3]));
}
已更新注释中的HTML代码
<mat-menu #contextMenu="matMenu" #contextMenu2="matMenu">
<ng-container>
<div mat-menu-item *ngFor="let function of FunctionNames"> {{function}}
<div matMenuContent *ngFor="let action of action;">
<button mat-menu-item (click)="onContextMenuAction(action)">{{function}}</button>
</div>
</div>
</ng-container>
</mat-menu>
更新的操作数据集
onContextMenuAction(action: ViewDataSource ) {
this.launchService.launchAction(parseInt(action[0]), parseInt(action[3]));
}
更新的上下文菜单HTML
onContextMenu(event: MouseEvent, action: ViewDataSource) {
event.preventDefault();
this.contextMenuPosition.x = event.clientX + 'px';
this.contextMenuPosition.y = event.clientY + 'px';
this.contextMenu.menuData = { action: action };
this.contextMenu.menu.focusFirstItem('mouse');
this.contextMenu.openMenu();
console.log(this.FunctionNames);
}
onContextMenuAction(action: ViewDataSource ) {
console.log('clicked');
// this.launchService.launchAction(this.line.targetActionTag.value, this.line.targetActionType);
// tslint:disable-next-line: radix
this.launchService.launchAction(parseInt(action[0]), parseInt(action[3]));
// debugger;
}
推荐答案
您可以尝试使用此代码.希望这可以解决您的问题
Can you try using this code.Hope this will solve your problem
在.ts中,您可以将动作对象存储为
In .ts you can store the action object like
this.dataSource = new ViewDataSource(this.actionService);
和.html中(假设this.dataSource
将存储您需要访问的实际操作对象)
and in .html (Assume this.dataSource
will store the actual action object that you need to access)
<mat-menu #contextMenu="matMenu" #contextMenu2="matMenu">
<div mat-menu-item *ngFor="let function of FunctionNames">
<ng-template matMenuContent>
<button (click)="onContextMenuAction(dataSource)">{{function}}</button>
</ng-template>
</div>
</mat-menu>
请确认您要在点击事件中访问的内容
Please confirm what you want to access in the click event
这篇关于NgFor仅显示数组中的第一个值的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!