Проблемы с настройкой таблицы образцов. «Не удалось найти подходящую модель строки для 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, но интерфейсы не совпадали с тем, что запрашивал 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

Ответы:


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 обратитесь к шагу 3 по установке модулей AgGrid.


1
Большое спасибо! Я должен был потратить немного больше времени на чтение документации
Сергей Смирнов

Что происходит, когда вы используете корпоративную версию? Я импортирую все модули ag-grid и вижу, что он включает этот, но я все еще получаю ту же ошибку: /
Stevie Star

@StevieStar Я также столкнулся с той же проблемой, проблема была решена для вас?
Ручи Гупта

0

Чтобы решить эту проблему, мне пришлось сначала импортировать ModuleRegistry и AllCommunityModules в maint.ts и добавить ModuleRegistry.registerModules (AllCommunityModules); ниже, перед платформойBrowserDynamic (). 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;

Мне никогда не приходилось делать это раньше в версии сообщества, но это быстро исправило проблему. Ответ, который был принят выше, указывает, что должно произойти, когда ваше приложение интегрирует только отдельные модули. Согласно документации : «Если вы решите выбрать отдельные модули, то как минимум должна быть указана модель строки. После этого все остальные модули являются необязательными в зависимости от ваших требований».

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.