サンプルテーブルの設定中に問題が発生しました。「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

回答:


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 '13

エンタープライズバージョンを使用するとどうなりますか?すべてのag-gridモジュールをインポートしますが、これにこのモジュールが含まれていることがわかりますが、それでも同じエラーが発生します:/
Stevie Star

@StevieStar私も同じ問題に直面していますが、問題は解決されましたか?
ルチグプタ

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"が必要であることを知りました。そのためには、次の2行をコンポーネントに含める必要があります。

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

これまでコミュニティバージョンでこれを行う必要はありませんでしたが、問題はすぐに修正されました。上記で受け入れられた答えは、アプリケーションが個々のモジュールのみを統合する場合に何が必要かを述べることです。ドキュメントごと:「個々のモジュールを選択する場合は、少なくとも行モデルを指定する必要があります。その後、その他のすべてのモジュールは要件に応じてオプションになります」。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.