从primeng表中的上下文菜单事件中获取列索引答案

【问题标题】：Get column index from context menu event in primeng table从primeng表中的上下文菜单事件中获取列索引
【发布时间】：2020-11-13 04:18:03
【问题描述】：

我已经创建了一个包含某些行和列的 p 表，并打算在鼠标右键单击时实现上下文菜单。为此，我通过添加以下代码修改了我的 app.component.html：

<p-table #dt [contextMenu]="cm" (onContextMenuSelect)="onContextMenuSelect($event,cm)">
<ng-template pTemplate="body" let-row let-columns="colData">
<tr [pSelectableRow]="row" [pContextMenuRow]="row" ng-mousedown="handleClick($event)" >
            <td pEditableColumn style= "height:34px;" *ngFor="let col of colData">
                <p-cellEditor>
...
</td>
        </tr>
    </ng-template>
</p-table>
</div>

<p-contextMenu #cm [model]="menuitems"></p-contextMenu>
</div>

我能够在鼠标右键单击时成功获取人民币菜单项。但是，我打算在单击 rmb 鼠标按钮的列上的 onContextMenuSelect(event,cm) 函数内进行进一步处理。有什么方法可以找到用户点击人民币的列索引吗？

【问题讨论】：

标签： css angular typescript primeng primeng-turbotable

【解决方案1】：

迟到总比没有好...但是，至少，为了记录。

这是我的工作：

<td *ngFor="let col of columns" **[pContextMenuRow]="{col: col, data: this}"**>
  <span *ngIf="!col.template && !col.component" class="p-text-bold p-ml-2">{{url[col.field]}}</span>
  <span *ngIf="col.template && !col.component" class="p-text-bold p-ml-2">{{col.template(myRowData[col.field])}}</span>
  <ng-container *ngIf="col.component">
    <ng-container *ngComponentOutlet="col.component; injector: getInjector(col.field);">
    </ng-container>
  </ng-container>
</td>

这样，您可以在表格组件的 contextMenu 命令回调中获得所需的信息。就我而言，列是动态添加的。所以我可以得到从col中选择的“字段”（列）。也可以在行上添加[pContextMenuRow]，根据上下文处理事件。

【讨论】：