上下文菜单在我的 ag-grid 中不起作用

Question

我的目标是右键单击单元格时显示上下文菜单。

但是我的代码没有响应右键单击。 我找不到我做错的地方。

下面是我的代码。 我写了日志“console.log("getContentMenuItems()");”但没有打印此日志。

my-grid-application.component.ts

export class MyGridApplicationComponent implements OnInit, OnDestroy {
  gridOptions: GridOptions;
  private subscription: Subscription;
  private isPubPark: boolean = false; 
  private getContextMenuItems;

  constructor(private commCodeGridOptionService: CommCodeGridOptionService, private commonService: CommonService) { 
    console.log("MyGridApplicationComponent: Constructor()");

    let params = new URLSearchParams(window.location.search.substring(1)); 
    this.isPubPark = (params.get('isPubPark') == 'true');
    console.log("params:" + params + ", " + params.get('isPubPark') + ", isPubPark: " + this.isPubPark);

    this.commCodeGridOptionService.setTarget(this.isPubPark);
    this.commCodeGridOptionService.fetchColumnDefs();
    this.commCodeGridOptionService.getColumnDefMessage().subscribe(message => {
      console.log("MyGridApplicationComponent:getColumnDefMessage()");
      this.gridOptions.columnDefs = this.commCodeGridOptionService.gridOptions.columnDefs;
      this.gridOptions.api.setColumnDefs(this.gridOptions.columnDefs);      
    });

    this.commCodeGridOptionService.getRowDataMessage().subscribe(message => { 
      console.log("MyGridApplicationComponent getRowDataMessage().subscribe()");

      this.gridOptions.rowData = this.commCodeGridOptionService.commcodeSitesList;

      //The gridOptions api will be set and ready to use once the grid's gridReady event has been called.
      this.gridOptions.api.setRowData(this.gridOptions.rowData);
    });

    this.getContextMenuItems = function getContextMenuItems(params) {
      console.log("getContentMenuItems()");
      var result = [
        {
          name: "Always Disabled",
          disabled: true,
          tooltip: "Very long tooltip, did I mention that I am very long, well I am! Long!  Very Long!"
        },
        "separator",
        "copy"
      ];
      return result;
    };
  }

  ngOnInit() {
    console.log("MyGridApplicationComponent: ngOnInit()");
    this.gridOptions = {};

    this.subscription = this.commonService.notifyObservable$.subscribe((res) => {
      console.log(res);
      if (res.hasOwnProperty('option') && res.option === 'onCommCodeSelected') {
        this.changeCommCodeFilter(res.value);
      }
    });
  }

  //set filter to commcode when click commCodeDesc component
  public changeCommCodeFilter(commcode: string) {
    console.log("changeCommCodeFilter() ", commcode);

    let ageFilterComponent = this.gridOptions.api.getFilterInstance('commCode');
    ageFilterComponent.setModel({
        type: 'equals',
        filter: commcode,
        filterTo: null
    });
    this.gridOptions.api.onFilterChanged();
    window.scrollTo(0,0);
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}

my-grid-application.component.html

<h3><a href='/?isPubPark={{!isPubPark}}'></a></h3>
<app-comm-code-selectbox></app-comm-code-selectbox>
<div style="width: 100%; height:700px">
  <ag-grid-angular #agGrid 
      style="width:100%;height:100%;" 
      class="ag-fresh" 
      [gridOptions]="gridOptions"
      [enableRangeSelection]="true"
      [allowContextMenuWithControlKey]="true"
      [getContextMenuItems]="getContextMenuItems"
      rowHeight=100
      enableSort 
      enableFilter
      enableColResize>
  </ag-grid-angular>
</div>  

Answer 1

上下文菜单是独立的企业功能，因此需要单独安装：

npm install ag-grid-enterprise

并且你必须在你为 angular 导入 ag grid 之后将它包含在模块中，像这样：

import { AgGridModule } from 'ag-grid-angular'; 
import'ag-grid-enterprise'; 

现在可以使用了！

Answer 2

您必须从 ag-grid Enterprise 安装菜单模块：

npm install @ag-grid-enterprise/menu

在你的组件中使用模块：

import { MenuModule } from '@ag-grid-enterprise/menu';

配置您的网格以使用此模块：

在 .ts 中：

gridModules = [MenuModule, ...];

在模板中：

<ag-grid-angular [modules]="gridModules" ...

您可能还需要设置suppressContextMenu = false; 并实现getContextMenuItems 函数

Answer 3

对于反应，

1. 确保您已从ag-grid enterprise 安装了menu 软件包

npm install @ag-grid-enterprise/menu

1. 添加getContextMenuItems 中提到的ag-grid docs 方法。
2. 在 ag-grid 的实例中添加以下属性。

suppressContextMenu={false}
allowContextMenuWithControlKey={true}
getContextMenuItems={getContextMenuItems}