Örnek tabloyu ayarlamada sorun. “RowModelType clientSide için eşleşen satır modeli bulunamadı”


11

Ben taze proje ag-grid için "Başlarken" öğretici geçiyor. Tüm adımları tamamladım ama bir hata mesajı aldım

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

Tüm kodumu öğreticide verilen örneklerle ve bazı dalgıç örnekleriyle karşılaştırdık ve herhangi bir fark fark etmedim. Client.SideRowModelModule uygulamasını app.module'a aktarmayı denedim, ancak arayüzler açısal olarak talep edilenle eşleşmedi, bu yüzden işe yaramadı. Fikirlerim bitti ve nasıl düzeltileceği hakkında herhangi bir bilgi bulamadım.

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 }
  ];...

Açısal: 8.2.10, Açısal CLI: 8.2.2, npm: 6.9.0 kullanıyorum

Yanıtlar:


5

App.component.ts dosyanızda, önce ClientSideRowModelModule dosyasını içe aktarmanız gerekir

import { ClientSideRowModelModule } from '@ag-grid-community/client-side-row-model';

Sonra AppComponent sınıfının içinde, aşağıdaki gibi bir modül dizisi değişkeni oluşturmanız gerekir:

modules: Module[] = [ClientSideRowModelModule];

Son olarak, app.component.html dosyanızda, ag-grid-açısal bileşenine bağlamanız gerekir

<ag-grid-angular 
style="width: 500px; height: 500px;" 
class="ag-theme-balham"
[rowData]="rowData" 
[columnDefs]="columnDefs"
[modules]="modules"
 >
</ag-grid-angular>

Daha fazla kaynak için AgGrid'in belgelerine bakın , AgGrid Modüllerini kurmak için 3. adımdır.


1
Çok teşekkür ederim! Belgeleri okumak için biraz daha fazla zaman harcamalıydım
Sergey Smirnov

Kurumsal sürümü kullandığınızda ne olur? Tüm ag-grid modüllerini içe aktarıyorum ve bunu içerdiğini görebiliyorum, yine de aynı hatayı alıyorum: /
Stevie Star

@StevieStar Ben de aynı sorunla karşı karşıya, sorun u için çözüldü?
Ruchi Gupta

0

Bu sorunu çözmek için önce maint.ts içinde ModuleRegistry ve AllCommunityModules almak ve ModuleRegistry.registerModules (AllCommunityModules) eklemek zorunda kaldı; platformBrowserDynamic (). hemen önce aşağıda bootstrapModule (AppModule) gibi:

import { ModuleRegistry, AllCommunityModules } from '@ag-grid-community/all-modules';


ModuleRegistry.registerModules(AllCommunityModules);
platformBrowserDynamic().bootstrapModule(AppModule)
 .catch(err => console.error(err));

Son olarak, bileşende (ör. Users.component.ts ) AllCommunityModules'ü içe aktararak ve değişkeni şöyle bildirerek kullandım:

import { AllCommunityModules } from '@ag-grid-community/all-modules';


public modules: Module[] = AllCommunityModules;

Buradaki cevaptan fikri aldım


0

Topluluk sürümünü sorunsuz bir şekilde kullanıyorum. Bir deneme sürümünü indirdim ve her şey değişti. Bu sorunla karşılaştığımda, gridde [modules] = "modüller" gerektiğini öğrendim. Bu, bileşene şu iki satırın dahil edilmesini gerektirir:

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

Bunu topluluk sürümünde daha önce hiç yapmadım, ancak sorunu hızla düzeltti. Yukarıda kabul edilen cevap, uygulamanız yalnızca bireysel modülleri entegre ederken ne olması gerektiğini belirtmektir. Başına belgelerinde : "Bir Satır Modeli ihtiyaç belirtilmesi O zaman en az bireysel modülleri seçmek seçerseniz diğer tüm modülleri gereksinimlere bağlı isteğe bağlıdır sonra söyledi.".

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.