设置示例 table 时遇到问题。 "Could not find matching row model for rowModelType clientSide"

Question

我一直在阅读有关新项目的 ag-grid 的 "Getting Started" 教程。已完成所有步骤，但出现错误

ag-Grid: could not find matching row model for rowModelType clientSide
ag-Grid: Row Model "Client Side" not found. Please ensure the ClientSideRowModelModule is loaded using: import '@ag-grid-community/client-side-row-model';

将我的所有代码与教程中提供的示例和一些 plunker 示例进行了比较，没有发现任何差异。尝试将 ClientSideRowModelModule 导入 app.module，但接口与 angular 请求的不匹配，因此它不起作用。我没有想法，也找不到任何关于如何修复它的信息。

app.module.ts:

    ... imports: [
    BrowserModule,
    AppRoutingModule,
    AgGridModule.withComponents([])
  ],...

app.cpmponent.html:

<ag-grid-angular 
style="width: 500px; height: 500px;" 
class="ag-theme-balham"
[rowData]="rowData" 
[columnDefs]="columnDefs"
 >
</ag-grid-angular>

app.component.ts:

    ...columnDefs = [
      {headerName: 'Make', field: 'make' },
      {headerName: 'Model', field: 'model' },
      {headerName: 'Price', field: 'price'}
  ];

  rowData = [
      { make: 'Toyota', model: 'Celica', price: 35000 },
      { make: 'Ford', model: 'Mondeo', price: 32000 },
      { make: 'Porsche', model: 'Boxter', price: 72000 }
  ];...

我正在使用 Angular：8.2.10，Angular CLI：8.2.2，npm：6.9.0

Answer 1

在您的 app.component.ts 中，您首先需要导入 ClientSideRowModelModule

import { ClientSideRowModelModule } from '@ag-grid-community/client-side-row-model';

然后在 AppComponent 里面 class，你需要像这样创建一个模块数组变量：

modules: Module[] = [ClientSideRowModelModule];

最后，在您的 app.component.html 中，您需要将其绑定到 ag-grid-angular 组件

<ag-grid-angular 
style="width: 500px; height: 500px;" 
class="ag-theme-balham"
[rowData]="rowData" 
[columnDefs]="columnDefs"
[modules]="modules"
 >
</ag-grid-angular>

要查看更多资源，请查看 AgGrid's documentation，这是安装 AgGrid 模块的第 3 步。

Answer 2

为了解决这个问题，我不得不先在maint.ts中导入ModuleRegistry和AllCommunityModules，然后添加ModuleRegistry.registerModules(AllCommunityModules); 下面 platformBrowserDynamic().bootstrapModule(AppModule) 像：

import { ModuleRegistry, AllCommunityModules } from '@ag-grid-community/all-modules';


ModuleRegistry.registerModules(AllCommunityModules);
platformBrowserDynamic().bootstrapModule(AppModule)
 .catch(err => console.error(err));

最后，在组件中（例如 users.component.ts）我通过导入 AllCommunityModules 并声明变量来使用它：

import { AllCommunityModules } from '@ag-grid-community/all-modules';


public modules: Module[] = AllCommunityModules;

我从这个答案中得到了灵感

Answer 3

我一直在使用社区版，没有任何问题。我刚刚下载了企业试用版，一切都变了。当我运行进入这个问题时，我了解到网格上需要 [modules]="modules" 。这需要将这两行包含在组件中：

import { AllModules } from '@ag-grid-enterprise/all-modules';
modules: Module[] = AllModules;

我以前在社区版本中从来没有这样做过，但它很快就解决了这个问题。上面接受的答案说明了当您的应用程序仅集成单个模块时需要发生什么。根据 documentation："If you choose to select individual modules then at a minimum the a Row Model need to be specified. After that all other modules are optional depending on your requirements"。

设置示例 table 时遇到问题。 "Could not find matching row model for rowModelType clientSide"

Trouble setting up sample table. "Could not find matching row model for rowModelType clientSide"

ag-grid-angular