如何在DataTable中使用带有命令和参数的Primeng Menu？

Question

Primeng 的 MenuItem 有一个名为 command 的参数，该参数是单击其项目时要执行的函数。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 传递项目和其他数据，但为此我需要为每个按钮创建一列。为了解决我想使用来自primeng的MenuItem的Menu。

问题是我找不到任何通过 MenuItem 中的命令传递参数的示例，而且我找不到方法来做到这一点。

如何使用带有 DataTable 的 MenuItem 来实现？

如果这是不可能的，我怎样才能实现相同的结果？

Answer 1

You can have a function that takes rowData and returns contextual 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) }
    ]
  }

UPDATE

[model]="getMenuItemsForItem(item)"

can cause performance issues, should be using a binding to an object instead.

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

and then set menuItems object with menu items for each item.

Answer 2

我知道这是旧的，但是可以防止p-menu在您的页面中使用 NN指令的一件事是在单击按钮时从您的组件调用一个函数，而不是(click)="menu.toggle($event)"在该函数中将数据注入每个菜单项。

我知道这有点麻烦，但总比p-menu为每个表行复制一个要好。

这是一个例子：

<p-menu #popupMenu [popup]="true" [model]="menuItems"></p-menu>

<!-- and where you want to open the menu -->
<a *ngIf="itemsMenu" (click)="toggleMenu(popupMenu, $event, rowData)">
    <i class="fas fa-chevron-circle-down"></i>
</a>

<p-menu #popupMenu [popup]="true" [model]="menuItems"></p-menu>

<!-- and where you want to open the menu -->
<a *ngIf="itemsMenu" (click)="toggleMenu(popupMenu, $event, rowData)">
    <i class="fas fa-chevron-circle-down"></i>
</a>

问候

Answer 3

我找到了解决问题的方法，尽管我认为这不是最好的解决方案。我希望那些遇到同样问题的人能够找到帮助。

通过 onClick 传递表格项并使用回调填充 menuItems 是可行的。

样本：

网页

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

打字稿

    onClickMenu(item: any){

      this.items.push({label: 'Option 1',
                      command: (event: any) => {
                      doSomething(item);}
                      });

      this.items.push({label: 'Option 2',
                      command: (event: any) => {
                      doSomething(item);}
                      });

      this.items.push({label: 'Option 3',
                      command: (event: any) => {
                      doSomething(item);}
                      });
                    
    }