我有一张桌子,上面列出了物品清单。我想使用 PrimeNg Menu 作为下拉菜单选项来导航到具有所选项目 ID 的其他页面。我想做的是,当我点击菜单项时,我想绑定所选项目的 id。
我的 HTML 看起来像这样
<tr *ngFor="let item of items" class="animated fadeIn">
<td>{{item.category}}</td>
<td>{{item.name}}</td>
<td>{{item.date}}</td>
<td>
<div>
<p-menu #tableMenu [popup]="true" [model]="tableMenuItems" appendTo="body"></p-menu>
<button type="button" pButton icon="pi pi-ellipsis-v"
class="ui-button-secondary ui-button-rounded ui-button-transparent"
(click)="tableMenu.toggle($event)">
</button>
</div>
</td>
</tr>
和我的.ts
this.tableMenuItems = [
{
label: 'View Item', command: (event) => {
// this.viewItemDetail() // here I wanted to bind item.id of the selected item and navigate to item detail page
}
},
{
label: 'Edit Item', command: (event) => {
this.editItem() // here I wanted to bind item.id of the selected item and navigate to item edit page
}
},
];
您可以创建一个属性来保存当前项目,并在调用切换方法之前在单击事件中设置所选项目
组件
selectedItem:any = null;
...
ngOnInit(){
this.tableMenuItems = [
{
label: 'View Item', command: (event) => {
console.log(this.selectedItem);
// this.viewItemDetail() // here I wanted to bind item.id of the selected item and navigate to item detail page
}
},
{
label: 'Edit Item', command: (event) => {
this.editItem() // here I wanted to bind item.id of the selected item and navigate to item edit page
}
},
];
}
模板
<tr *ngFor="let item of items" class="animated fadeIn">
<td>{{item.category}}</td>
<td>{{item.name}}</td>
<td>{{item.date}}</td>
<td>
<div>
<p-menu #tableMenu [popup]="true" [model]="tableMenuItems" appendTo="body"></p-menu>
<button type="button" pButton icon="pi pi-ellipsis-v"
class="ui-button-secondary ui-button-rounded ui-button-transparent"
(click)="selectedItem = item;tableMenu.toggle($event)">
</button>
</div>
</td>
</tr>
非常好的解决方案。我使用 onDropdownClick 事件将相同的概念应用于 PrimeNg Table 和 SplitButton,如下所示:
模板
然后在各自的 ts 文件组件中:
this.menuItens = [
{
label: 'Print', icon: 'pi pi-fw pi-print', command: () => {
this.print(this.selectedItem.identifier, this.selectedItem.title, this.selectedItem);
}
},
{ separator: true },
{ label: 'Admin'}
];