PrimeNg context menu passing data issue

Question

I am using PrimeNg's context menu v6.0.1, the problem is the documentation is not clear and I cannot find it over the web as well on how to pass data to command function e.g.:

I have 10 objects rendered on screen and context menu is attached to all of these objects, now if I click on menu item I want to get the id of the target object on which the context menu is rendered, how can this be accomplished?

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

and following is my items model:

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 中的上下文菜单变量，例如

希望这可以帮助。