Rắc rối khi thiết lập bảng mẫu. Không thể tìm thấy mô hình hàng phù hợp cho rowModelType clientSide


11

Tôi đã trải qua hướng dẫn "Bắt đầu" cho lưới điện trong dự án mới. Đã hoàn thành tất cả các bước nhưng gặp lỗi khi nói

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

So sánh tất cả mã của tôi với các ví dụ được cung cấp trong hướng dẫn và một số ví dụ về plunker và không nhận thấy bất kỳ sự khác biệt nào. Đã thử nhập ClientSideRowModelModule vào app.module nhưng giao diện không khớp với những gì góc cạnh yêu cầu, vì vậy nó không hoạt động. Tôi không có ý tưởng và không tìm thấy bất kỳ thông tin nào về cách khắc phục nó.

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

Tôi đang sử dụng Angular: 8.2.10, CLI góc: 8.2.2, npm: 6.9.0

Câu trả lời:


5

Trong app.component.ts của bạn, trước tiên bạn cần nhập ClientSideRowModelModule

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

Sau đó, bên trong lớp AppComponent, bạn cần tạo một biến mảng mô-đun như thế này:

modules: Module[] = [ClientSideRowModelModule];

Cuối cùng, trong app.component.html của bạn, bạn cần liên kết nó với thành phần góc lưới ag

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

Để biết thêm tài nguyên, hãy xem tài liệu của AgGrid , đây là bước 3 về cài đặt Mô-đun AgGrid.


1
Cảm ơn rât nhiều! Tôi nên dành thêm một chút thời gian để đọc tài liệu
Serge Smirnov

Điều gì xảy ra khi bạn sử dụng phiên bản doanh nghiệp? Tôi nhập tất cả các mô-đun lưới điện và tôi có thể thấy nó bao gồm mô-đun này, nhưng tôi vẫn nhận được lỗi tương tự: /
Stevie Star

@StevieStar tôi cũng đang đối mặt với vấn đề tương tự, vấn đề đã được giải quyết cho bạn?
Ruchi Gupta

0

Để giải quyết vấn đề này, trước tiên tôi phải nhập ModuleRegistry và AllCommunityModules trong duy trì và thêm ModuleRegistry.registerModules (AllCommunityModules); bên dưới ngay trước platformBrowserDocate (). bootstrapModule (AppModule) như:

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


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

Cuối cùng, trong thành phần (ví dụ: users.component.ts ) tôi đã sử dụng nó bằng cách nhập AllCommunityModules và khai báo biến như:

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


public modules: Module[] = AllCommunityModules;

Tôi có ý tưởng từ câu trả lời này ở đây


0

Tôi đã sử dụng phiên bản cộng đồng không có vấn đề. Tôi vừa tải về một bản dùng thử của doanh nghiệp và mọi thứ đã thay đổi. Khi tôi gặp vấn đề này, tôi biết rằng [mô-đun] = "mô-đun" là bắt buộc trên lưới. Điều đó đòi hỏi hai dòng này phải được đưa vào thành phần:

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

Tôi chưa bao giờ phải làm điều này trước đây trong phiên bản cộng đồng, nhưng nó đã nhanh chóng khắc phục vấn đề. Câu trả lời đã được chấp nhận ở trên là nêu rõ những gì cần phải xảy ra khi ứng dụng của bạn chỉ tích hợp các mô-đun riêng lẻ. Theo tài liệu : "Nếu bạn chọn chọn từng mô-đun thì tối thiểu Mô hình Hàng cần được chỉ định. Sau đó, tất cả các mô-đun khác là tùy chọn tùy theo yêu cầu của bạn".

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.