PrimeNg上下文菜单传递数据问题

Question

我正在使用PrimeNg的上下文菜单v6.0.1，问题是文档不清楚，我无法通过网络找到它如何将数据传递给命令功能，例如：

我在屏幕上呈现了10个对象，并且上下文菜单附加到所有这些对象，现在如果我单击菜单项我想获取上下文菜单所呈现的目标对象的id，如何实现？

<div id="block-container" *ngFor="let block of blocks">

    <!-- where to attach this block object ??? -->

    <p-contextMenu appendTo="body" 
      [target]="blockContextMenu" 
      [model]="contextMenuItems">
    </p-contextMenu>

    <div #blockContextMenu>
       Some implementation...
    </div>
</div>

以下是我的物品型号：

this.contextMenuItems = [
  {
    label: 'Trip Details',
    command: (event) => {
      // event doesn't contain anything useful,
      // and only has the clicked menu item specific information.
  }}
];

Answer 1

要使用primeng正确实现上下文菜单，您需要添加

[contextMenu]="cm"

例如，在您想要显示的元素中，您需要在div上使用上下文菜单

<div id="block-container" *ngFor="let block of blocks" [contextMenu]="cm"></div>

同样在p-contextMenu元素中，你需要从div中提到上下文菜单的变量

希望这可以帮助。

Answer 2

  @ViewChild('copyMenu') copyMenu: ContextMenu;
  
    onLinkRightClicked(content: string, e: any): void {

    if (this.copyMenu) {
      let model: MenuItem[] = [];
      model.push({ label: 'Action', command: (event) => this.doAction(content) });
      this.copyMenu.model = model;
      this.copyMenu.show(e);
    }
  }
  
  doAction(content){
    // here 
  }

<div #blockContextMenu (contextmenu)="onLinkRightClicked(content, $event)">
       Some implementation...
</div>

<p-contextMenu appendTo="body" #targetContextMenu>
</p-contextMenu>