Ag-grid 角度复制菜单选项不可用答案

【问题标题】：Ag-grid angular copy menu option not availableAg-grid 角度复制菜单选项不可用
【发布时间】：2020-05-07 06:44:12
【问题描述】：

我正在使用具有企业许可证的 angular 8 的 ag-grid。由于某种原因，默认的“复制”、“带有标题的复制”上下文菜单项不可用。仅显示“导出”项目。其他企业功能运行良好，但我似乎无法弄清楚如何启用“复制”。

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

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：无法将列工具面板用作模块 @ag-grid-enterprise/column-tool-panel 不存在。你需要加载具有以下功能的模块： import "@ag-grid-enterprise/column-tool-panel"

【问题讨论】：

标签： angular menu copy ag-grid

【解决方案1】：

好吧，显然我一直在为 ag-grid-angular 组件使用错误的包。

在我使用的模块文件中：

从 'ag-grid-angular' 导入 { AgGridModule };

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

从'@ag-grid-community/angular'导入{ AgGridModule }；

【讨论】：

【解决方案2】：

有两种方法可以将 AG Grid 包含在您的项目中，通过完整的包或使用功能模块。

来自docs 的警告是关于导致上述问题的混合方法。

重要的是不要在同一个包和模块中混用应用程序，因为这将导致 AG Grid 被包含两次，并且将您的捆绑包大小翻倍！所有模块的范围都是 @ag-grid-community/* 或 @ag-grid-enterprise/* 不应混用使用独立软件包 ag-grid-community 和农业网格企业。

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 中对此进行了更多介绍，其中解释了如何使用每种方法。

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

【讨论】：

【解决方案3】：

另外，您的 package.json 可能有问题。我最近升级了 Ag-Grid 版本，控制面板停止工作。只有在升级所有 @angular/* 包并删除/重新创建 node_modules 中的 @ag-grid 包文件夹后，错误才会消失。

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

【讨论】：

【解决方案4】：

只是想让那些面临 Ag-Grid-React 类似问题的人（我的剪贴板上下文菜单将拒绝识别和显示 Copy 和 Copy with 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 包。

【讨论】：

【解决方案5】：

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

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

ModuleRegistry.registerModules([ClipboardModule])

【讨论】：