Ag-grid angular 复制菜单选项不可用

Question

我正在使用带有 angular 8 的 ag-grid 和企业许可证。由于某些原因，默认的 "copy"、"copy with headers" 上下文菜单项不可用。仅显示 "Export" 项。其他企业功能运行良好，但我似乎无法弄清楚如何启用 "copy"。

我不确定接下来可以尝试什么，我尝试过使用不同的导入、禁用功能、...

ag-grid-angular 标签：

<ag-grid-angular
      #agGrid
      style="width: 800px; height: 500px;"
      class="ag-theme-balham"
      [columnDefs]="columnDefs"
      [defaultColDef]="defaultColDef"
      rowGroupPanelShow="always"
      [modules]="modules"
      [sideBar]="true"
      rowSelection="multiple"
      enableRangeSelection="true"
      setSuppressClipboardPaste="false"
      [suppressDragLeaveHidesColumns]="true"
      [suppressMakeColumnVisibleAfterUnGroup]="true"
      [rowData]="rowData"
      (gridReady)="onGridReady($event)"

    ></ag-grid-angular>

测试组件文件如下所示：

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { AllModules , Module} from "@ag-grid-enterprise/all-modules";
import "@ag-grid-enterprise/core";
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent  {

  private gridApi ;
  private gridColumnApi ;

  private columnDefs;
  private defaultColDef;
  private rowData;
  public modules: Module[] = AllModules;
  constructor(private http: HttpClient) {

    this.columnDefs = [
      {
        field: "athlete",
        width: 150,
        filter: "agTextColumnFilter"
      },
      {
        field: "age",
        width: 90
      },
      {
        field: "country",
        width: 120
      },
      {
        field: "year",
        width: 90
      },
      {
        field: "date",
        width: 110
      },
      {
        field: "gold",
        width: 100
      },
      {
        field: "silver",
        width: 100
      },
      {
        field: "bronze",
        width: 100
      },
      {
        field: "total",
        width: 100
      }
    ];
    this.defaultColDef = {
      enableValue: true,
      enableRowGroup: true,
      enablePivot: true,
      sortable: true,
      filter: true,
    };
  }


  onGridReady(params) {
    this.gridApi = params.api;
    this.gridApi.setSuppressClipboardPaste = false;
    this.gridColumnApi = params.columnApi;

    this.http
      .get("https://raw.githubusercontent.com/ag-grid/ag-grid/master/packages/ag-grid-docs/src/olympicWinners.json")
      .subscribe(data => {
        this.rowData = data;
      });
  }

}

我不确定以下内容是否相关，但我会将其添加为额外信息：当我尝试将企业模块 "AllModules" 绑定到 ag-angular-grid 时HTML，一些功能停止工作（如侧边栏）并且我收到浏览器错误：

ag-Grid: unable to use Column Tool Panel as module @ag-grid-enterprise/column-tool-panel is not present. You need to load the module with: import "@ag-grid-enterprise/column-tool-panel"

Answer 1

是的，显然我为 ag-grid-angular 组件使用了错误的包。

在我使用的模块文件中：

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

切换到以下包使整个事情像黄油一样顺利：

import { AgGridModule } from '@ag-grid-community/angular';

Answer 2

另外，您的 package.json 可能有问题。我最近升级了 Ag-Grid 版本，控制面板停止工作。仅在升级所有@angular/* 包和deleting/re-creating node_modules 中的@ag-grid 包文件夹后，错误才消失。

这是我的 package.json 的 link：https://stackblitz.com/edit/ag-grid-angular-hello-world-mnmfpr?file=package.json

Answer 3

只是想让那些面临与 Ag-Grid-React 类似问题的人（我的剪贴板上下文菜单将拒绝识别和显示复制和使用 Headers 选项复制），做与接受的相同的事情在此线程上回答，即：

而不是使用

import {AgGridReact} from 'ag-grid-react'; 
import 'ag-grid-enterprise';

使用下面的

import {AgGridReact} from "@ag-grid-community/react";
import {AllModules} from "@ag-grid-enterprise/all-modules";

可以在此处找到正确用法的示例：https://www.ag-grid.com/javascript-grid-clipboard/

如果您使用 "import { AgGridReact } from 'ag-grid-react';"

，则需要将 @ag-grid-community/react 和 @ag-grid-enterprise/all-modules 安装为单独的 NPM 包

Answer 4

如果您手动注册模块，则必须添加 ClipboardModule 才能使用复制选项。

port {ClipboardModule} from "@ag-grid-enterprise/all-modules";

ModuleRegistry.registerModules([ClipboardModule])

Answer 5

有两种方法可以将 AG Grid 添加到您的项目中，一种是通过完整的包，另一种是使用功能模块。

docs 中有一条关于导致上述问题的混合方法的警告。

It is important that you do not mix packages and modules in the same application as this will result in AG Grid being included twice and doubling your bundle size! All modules are scoped by either @ag-grid-community/* or @ag-grid-enterprise/* and should not be mixed with the standalone packages of ag-grid-community and ag-grid-enterprise.

Modules	Packages
@ag-grid-community/xxxxx	ag-grid-community
@ag-grid-enterprise/xxxxx	ag-grid-enterprise
@ag-grid-community/angular	ag-grid-angular

我在这个 blog post 中写了更多关于这个的文章，它解释了如何使用每种方法。

此外，不再推荐all-modules。如果您正在使用它，我建议您切换到使用包方法，因为这将使您能够使用所有可用的网格功能。

Ag-grid angular 复制菜单选项不可用

Ag-grid angular copy menu option not available

copy

menu

ag-grid

angular