如何在使用 p-contextMenu 和 p-table 右键单击第二个 table 后隐藏第一个 table 的菜单选项？

Question

我有一个 p-table 和 p-contextMenu，它们让我在 table 上有右键单击选项。当我右键单击第一行 table 时，我可以查看我的右键单击选项。当我右键单击第二行 table 时，我可以查看我的右键单击选项，但无法隐藏第一个 table.

的菜单

如图所示，当我右键单击第二个 table 时，第一个 table 右键单击选项仍然存在。 https://i.stack.imgur.com/FtybH.jpg

数据-Table-Component.html

<p-contextMenu #cm [model]="items" appendTo="body"></p-contextMenu>

<p-table [columns]="columns" [value]="tradeList" [(contextMenuSelection)]="selectedProduct" 
[contextMenu]="cm" dataKey="id" [rowHover]=true styleClass="p-datatable-striped p- 
datatable-responsive-demo"
selectionMode="multiple" [(selection)]="selectedTrade">
<ng-template pTemplate="header" let-columns>
<tr>
<th pSortableColumn *ngFor="let col of getKeys(columns)" pReorderableColumn 
 pResizableColumn>    {{col}}
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-block let-columns="columns" let- 
 rowIndex="rowIndex">
  <tr [pContextMenuRow]="block" [pSelectableRow]="block" 
 [pSelectableRowIndex]="rowIndex">
  <td *ngFor="let col of getKeys(columns)" (click)=fetchDataArray(block)>
  {{block[col]}}
 </td>
 </tr>
 </ng-template>

数据-Table-Component.ts

ngOnInit(): void{
this.items=[
 {label: 'Option 1',icon:'pi pi-user-edit'},
 {label: 'Option 2',icon:'pi pi-user-edit'},
 {label: 'Option 3',icon:'pi pi-user-edit'},
 {label: 'Option 4',icon:'pi pi-user-edit'},
 {label: 'Option 5',icon:'pi pi-user-edit'},
 ];
}

单击第一个 table 行的 fetchDataArray 函数被调用，第二个 table 数据被调用。

在 ComponentBox 文件中，我正在调用已声明的 p-table 并传递 table 所需的值。

分量-Box.html

<ng-template #tabdata>
<p-scrollPanel [style]="{width: '100%', height: '100%'}"   
<app-data-table [tradeList]="data" [selectedEntity]="entity" 
[entityData]="entityData" 
 (selectedTradeEvent)="fetchData($event)"></app-data-table> 
  // This gives us first table data and on click event which is 
  //selectedTradeEvent is called click of a row to fetch data for second 
 //table.
 </p-scrollPanel>
 <p-scrollPanel [style]="{width: '100%', height: '100%'}"   
 <app-data-table [tradeList]="table.value" [selectedEntity]="table.key" 
 [entityData]="entityData"> </app-data-table> 
 // This gives us second table data
</p-scrollPanel>
</ng-template>

组件-Box.ts文件-

fetchDataArray(selectedItem){
this.entityData[this.entity]["showTables"].forEach(val=>{
this.service.sendGetRequest('getData?id='+selectedItem).then(data=> 
 {
 this.showTables.set("ABC",data);
 });
 });
}

Answer 1

我遇到了类似的问题，我在 p-table 上有一个上下文菜单，在 openlayer 地图上有第二个上下文菜单（一些 div），当打开第一个然后第二个都显示在屏幕上时.这就是我解决问题的方法...我已经具有显示上下文菜单的功能（因为我必须将它们放在我想要的位置），所以当打开其中一个上下文菜单时，我明确地在另一个上调用隐藏... 这是代码：

<p-contextMenu #cmMap [ngStyle]="{'position':'absolute', 'z-index':'10000', 'top':mapContextMenuY+'px', 'left':mapContextMenuX+'px'}" [model]="mapContextMenuItems"></p-contextMenu>
<p-contextMenu #cmTab [ngStyle]="{'position':'absolute', 'z-index':'10000', 'top':tabContextMenuY+'px', 'left':tabContextMenuX+'px'}" [model]="tabContextMenuItems"></p-contextMenu>
...
@ViewChild('cmMap') cmMap: ContextMenu;
@ViewChild('cmTab') cmTab: ContextMenu;
...
openCmTableRow(event: PointerEvent, cm: ContextMenu, row: IClipboard) {
  console.log(row);
  this.clipboardGeometrija = row;
  const tableHolderRect: DOMRect = this.leftSidebar.nativeElement.getBoundingClientRect();
  this.tabContextMenuX = event.x - tableHolderRect.x;
  this.tabContextMenuY = event.y - tableHolderRect.y;
  cm.show();
  this.cmMap.hide();
}
openCmMap(event: PointerEvent, cm: ContextMenu) {
  const kartaRect: DOMRect = this.karta.nativeElement.getBoundingClientRect();
  this.mapContextMenuX = event.x - kartaRect.x;
  this.mapContextMenuY = event.y - kartaRect.y;
  cm.show();
  this.cmTab.hide();
}

Answer 2

我在将菜单附加到 table 内的 body 并有多个菜单时遇到了同样的问题，我所做的是：

  previusMenu:any;
  toggleMenu(menu, items, event, rowData) {
    //hide previous menu 
    this.previusMenu?.hide();
    this.selectedTaxActionsModel = //add your items;
    this.previusMenu=menu;
    menu.toggle(event);
  }

 <button type="button" pButton icon="pi pi-fw pi-cog" (click)="toggleMenu(menu, col.items, $event, rowData); $event.stopPropagation()"></button>
<p-menu #menu [popup]="true" appendTo="datatable" [model]="selectedTaxActionsModel"></p-menu>

如何在使用 p-contextMenu 和 p-table 右键单击第二个 table 后隐藏第一个 table 的菜单选项？

How to hide menu option of first table after right click on second table using p-contextMenu and p-table?

css

typescript

primeng

angular

primeng-datatable

如何在使用 p-contextMenu 和 p-table 右键单击​​第二个 table 后隐藏第一个 table 的菜单选项？

How to hide menu option of first table after right click on second table using p-contextMenu and p-table?

css

typescript

primeng

angular

primeng-datatable

如何在使用 p-contextMenu 和 p-table 右键单击第二个 table 后隐藏第一个 table 的菜单选项？