无法设置样品表。“找不到rowModelType clientSide的匹配行模型”


11

我一直在阅读有关新项目中的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';

将我的所有代码与教程中提供的示例以及一些更简单的示例进行了比较,并且没有发现任何差异。尝试将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

Answers:


5

在您的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文档,这是安装AgGrid模块的第3步。


1
非常感谢你!我应该花更多的时间阅读文档
Sergey Smirnov,

使用企业版时会发生什么?我导入了所有的ag-grid模块,我可以看到它包含了这个模块,但是我仍然遇到同样的错误:/
Stevie Star

@StevieStar我也面临着同样的问题,您的问题解决了吗?
Ruchi Gupta

0

为了解决这个问题,我必须首先在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;

我的想法从这个答案在这里


0

我一直在使用社区版本,没有任何问题。我刚刚下载了企业版试用版,一切都变了。遇到此问题时,我了解到网格上需要[modules] =“ modules”。这要求在组件中包括以下两行:

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

我以前从未在社区版本中这样做过,但是它很快解决了该问题。上面接受的答案是说明当您的应用程序仅集成单个模块时需要做什么。根据文档:“如果您选择选择单个模块,则至少需要指定一个行模型。此后,根据您的要求,所有其他模块都是可选的”。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.