angular - 如何在DataTable中使用带有命令和参数的Primeng菜单？

Question

primeng的MenuItem有一个参数叫command，它是当它的item被点击时执行的函数。 https://www.primefaces.org/primeng/#/steps 中提供了一个使用它的示例给用户反馈。

command: (event: any) => {
                this.activeIndex = 0;
                this.msgs.length = 0;
                this.msgs.push({severity:'info', summary:'First Step', detail: event.item.label});
            }

但是，我想像这样使用 MenuItem 作为我的 Primeng DataTable 的列。

为此我需要这样使用我的菜单:

<p-column>
  <ng-template let-item="rowData"
      <p-menu #menu popup="popup" [model]="items"></p-menu>
      <button type="button" pButton icon="fa fa-list" label="Show" (click)="menu.toggle($event)"></button>
  </ng-template>
</p-column>

获取“项目”和我单击的行以及其他类型的数据。

使用按钮，我可以通过 onClick 传递项目和其他数据，但为此我需要为每个按钮创建一列。为了解决这个问题，我想将 Menu 与 primeng 的 MenuItem 一起使用。

问题是我找不到任何通过 MenuItem 中的命令传递参数的示例，而且我找不到执行此操作的方法。

如何将 MenuItem 与 DataTable 结合使用？

如果那不可能，我怎样才能达到相同的结果？

Answer 1

您可以拥有一个接受 rowData 并返回上下文 MenuItem[]

的函数

<p-column>
  <ng-template let-item="rowData"
      <p-menu #menu popup="popup" [model]="getMenuItemsForItem(item)"></p-menu>
      <button type="button" pButton icon="fa fa-list" label="Show" (click)="menu.toggle($event)"></button>
  </ng-template>
</p-column>

---

  getMenuItemsForItem(item: MyItem): MenuItem[] {
    const context = item;
    return [
      { label: 'Label1', icon: 'fa-plus', command: e => this.takeAction(e, context) }
    ]
  }

---

更新

[model]="getMenuItemsForItem(item)"

可能会导致性能问题，应该改用绑定(bind)到对象。

[model]="menuItems[item.uniqueKey]"

然后为每个项目设置带有菜单项的 menuItems 对象。