Проблеми з налаштуванням вибіркової таблиці. "Не вдалося знайти відповідну модель рядка для rowModelType clientSide"


11

Я переглядав підручник "Початок роботи" для аг-сітки на новому проекті. Виконав усі дії, але отримав помилку

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

<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 Я також зіткнувся з тією ж проблемою, питання вирішено для u?
Ручі Гупта

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

Я використовував версію спільноти без жодних проблем. Я просто завантажив пробну версію підприємства і все змінилося. Коли я зіткнувся з цим питанням, я дізнався, що в модулі потрібні [модулі] = "модулі". Для цього потрібно, щоб ці компоненти були включені до компонента:

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

Мені ніколи не доводилося цього робити у версії спільноти, але це швидко виправило проблему. Відповідь, яку було прийнято вище, вказує, що має відбутися, коли ваша програма інтегрує лише окремі модулі. Згідно з документацією : "Якщо ви вибираєте окремі модулі, потрібно як мінімум вказати модель рядка. Після цього всі інші модулі є необов'язковими залежно від ваших вимог".

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.