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

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>

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

使用buttom我可以通过onClick传递项目和其他数据，但为此我需要为每个buttom创建一个列。并解决我想要使用来自primeng的MenuItem的菜单。

问题是我找不到任何通过MenuItem中的命令传递参数的示例，我找不到办法。

如何使用DataTable使用MenuItem实现这一目标？

如果无法做到这一点，我该如何取得相同的结果？

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)"

可能会导致性能问题，应该使用绑定到对象。

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

然后使用每个项目的菜单项设置menuItems对象。

Answer 2

我找到了解决问题的方法，虽然我认为这不是最好的解决方案。我希望那些有同样问题的人能发现它有用。

通过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);}
                  });
                
}
                

Answer 3

我知道这很旧，但是可以避免在页面中使用NN p-menu指令的一件事是在按钮上单击而不是(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>

 toggleMenu(menu, event, rowData) {
    this.menuItems.forEach((menuItem) => {
      menuItem.data = rowData;
    });
    menu.toggle(event);
  }

致谢

Answer 4

JS

this.items = (rowData) => {
  return [
    {
      label: 'Certidão', icon: 'ui-icon-print', command: (event) => {
        console.log(rowData);
      }
    },
    {
      label: 'Declaração', icon: 'ui-icon-print', command: (event) => {
        console.log(rowData);
      }
    }
  ];
};

HTML

<p-splitButton label="{{ rowData.nomeColaborador }}" icon="ui-icon-folder" [model]="items(rowData)" >

如果您要传递rowData，可以显式调用这样的函数

Answer 5

另一种选择是在选择菜单时将当前菜单rowData添加到私有变量，如下所示：

<p-menu #menu popup="popup" [model]="items"></p-menu>
      <button type="button" class="btn-more" pButton icon="icon-more" label=" " (click)="menu.toggle($event);onClickMenu(rowData);"></button>

public onClickMenu(rowData: any) { 
        this.currentRowData = rowData; 
    }

让我知道这样做是否有任何影响，谢谢。