ปัญหาในการตั้งค่าตารางตัวอย่าง “ ไม่พบโมเดลแถวที่ตรงกันสำหรับ rowModelType clientSide”

ฉันได้ผ่านบทช่วยสอน "เริ่มต้นใช้งาน" สำหรับ 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 แต่อินเทอร์เฟซไม่ตรงกับสิ่งที่แองกูลาร์ร้องขอดังนั้นจึงไม่ทำงาน ฉันหมดความคิดและไม่สามารถหาข้อมูลใด ๆ เกี่ยวกับวิธีการแก้ไขได้

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เป็นขั้นตอนที่ 3 ในการติดตั้งโมดูล AgGrid

เพื่อแก้ปัญหานี้ฉันต้องนำเข้า ModuleRegistry และ AllCommunityModules ครั้งแรกในmaint.tsและเพิ่ม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;

ฉันไม่เคยทำแบบนี้มาก่อนในเวอร์ชั่นชุมชน แต่มันแก้ไขปัญหาได้อย่างรวดเร็ว คำตอบที่ได้รับการยอมรับด้านบนคือการระบุสิ่งที่ต้องเกิดขึ้นเมื่อแอปพลิเคชันของคุณรวมโมดูลแต่ละโมดูลเท่านั้น ตามเอกสาร : "ถ้าคุณเลือกที่จะเลือกแต่ละโมดูลอย่างน้อยที่สุดก็จำเป็นต้องระบุ Row Model หลังจากนั้นโมดูลอื่น ๆ ทั้งหมดจะเป็นทางเลือกขึ้นอยู่กับความต้องการของคุณ"