PrimeNg 上下文菜单传递数据问题 [英] PrimeNg context menu passing data issue

问题描述

我使用的是 PrimeNg 的上下文菜单 v6.0.1，问题是文档不清楚，我也无法在网络上找到有关如何将数据传递给命令函数的信息，例如:

我在屏幕上渲染了 10 个对象，上下文菜单附加到所有这些对象，现在如果我单击菜单项，我想获取在其上渲染上下文菜单的目标对象的 id，这怎么可能完成了吗?

<!-- 在哪里附加这个块对象???--><p-contextMenu appendTo="body"[目标]="blockContextMenu"[模型]="contextMenuItems"></p-contextMenu><div #blockContextMenu>一些实现...

以下是我的物品模型:

this.contextMenuItems = [{label: '行程详情',命令:(事件)=>{//事件不包含任何有用的东西，//并且只有被点击的菜单项的特定信息.}}];

解决方案

 @ViewChild('copyMenu') copyMenu: ContextMenu;onLinkRightClicked(content: string, e: any): void {如果(this.copyMenu){让模型:MenuItem[] = [];model.push({ label: 'Action', command: (event) => this.doAction(content) });this.copyMenu.model = 模型；this.copyMenu.show(e);}}doAction(内容){//这里}

一些实现...
<p-contextMenu appendTo="body" #targetContextMenu></p-contextMenu>

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.
  }}
];

解决方案

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

这篇关于PrimeNg 上下文菜单传递数据问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！