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

标签 angular primeng angular6

我正在使用 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.
  }}
];

最佳答案

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

关于angular - PrimeNg 上下文菜单传递数据问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51480381/

相关文章:

angular - 带有货币的 PrimeNG p-inputNumber 不会强制仅使用移动设备输入数字

css - PrimeNG Accordion 无法正常工作和显示

Angular 2上下滑动动画

javascript - 在 ListView 中显示 Array 的每个项目

Electron+Angular 2 和 TypeScript 应用程序中的 Node.js 模块查找

javascript - 在多个值的对象数组中搜索

html - CSS:选择具有特定类的最后一个 div

angular - primeng 表根据用户选择保留列宽

JavaScript - getter 函数与构造函数 - 哪个先执行?

javascript - v.context.$implicit.(PropertyName)不是一个函数