샘플 테이블 설정에 문제가 있습니다. “rowModelType clientSide에 대해 일치하는 행 모델을 찾을 수 없습니다”

나는 새로운 프로젝트에서 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';

내 모든 코드를 튜토리얼에서 제공된 예제와 일부 플 런커 예제와 비교했지만 차이점을 발견하지 못했습니다. 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을 사용하고 있습니다.

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 단계입니다.

이 문제를 해결하려면 먼저 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;

나는이 대답 에서 아이디어를 얻었습니다.

커뮤니티 버전을 문제없이 사용하고 있습니다. 방금 엔터프라이즈 시험판을 다운로드했는데 모든 것이 바뀌 었습니다. 이 문제가 발생했을 때 그리드에 [modules] = "modules"가 필요하다는 것을 알게되었습니다. 구성 요소에 다음 두 줄이 포함되어야합니다.

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

커뮤니티 버전에서는 이전에이 작업을 수행 할 필요가 없었지만 문제를 신속하게 해결했습니다. 위에서 승인 된 답변은 애플리케이션이 개별 모듈 만 통합 할 때 발생해야하는 작업을 나타냅니다. 당 문서 : "당신은 개의 행 모델 필요가 지정하는 최소한 다음 개별 모듈을 선택하도록 선택하면 다른 모든 모듈은 사용자의 요구 사항에 따라 선택적 후 것을.".