设置样品表时遇到问题。 “无法为 rowModelType 客户端找到匹配的行模型”答案

【问题标题】：Trouble setting up sample table. "Could not find matching row model for rowModelType clientSide"设置样品表时遇到问题。 “无法为 rowModelType 客户端找到匹配的行模型”
【发布时间】：2020-03-08 08:05:41
【问题描述】：

我一直在阅读关于新项目的 ag-grid 的“入门”教程。已完成所有步骤，但出现错误提示

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 但接口与请求的角度不匹配，因此无法正常工作。我没有想法，也找不到任何关于如何解决它的信息。

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

【问题讨论】：

标签： ag-grid-angular

【解决方案1】：

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

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

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

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 步。

【讨论】：

非常感谢！我应该多花一点时间阅读文档
使用企业版会发生什么？我导入了所有的 ag-grid 模块，我可以看到它包括这个，但我仍然收到同样的错误：/
@StevieStar 我也面临同样的问题，问题解决了吗？
@RuchiGupta 如果你还没有解决这个问题，看起来你可以做和社区版一样的事情。您可以在其中混合和匹配企业模块和社区模块。当我第一次发布我的 anwser 时，ag-Grid 已经修改了 documentation page。

【解决方案2】：

为了解决这个问题，我必须先在 maint.ts 中导入 ModuleRegistry 和 AllCommunityModules 并在 platformBrowserDynamic 之前添加 ModuleRegistry.registerModules(AllCommunityModules); ().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;

我从这个答案here得到了这个想法

【讨论】：

【解决方案3】：

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

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

我以前在社区版本中从来没有这样做过，但它很快纠正了这个问题。上面接受的答案是说明当您的应用程序仅集成单个模块时需要发生什么。根据documentation：“如果您选择选择单个模块，则至少需要指定行模型。之后所有其他模块都是可选的，具体取决于您的要求”。

【讨论】：