AG Grid 找不到匹配的 rowModelType serverSide 行模型答案

【问题标题】：AG Grid could not find matching row model for rowModelType serverSideAG Grid 找不到匹配的 rowModelType serverSide 行模型
【发布时间】：2021-11-05 23:41:16
【问题描述】：

我创建了一个角度组件来显示带有服务器端 rowModelType 的 ag-grid 数据。我正在关注这个链接：https://www.ag-grid.com/angular-data-grid/server-side-model-datasource/。

但出现两个错误：

这是我的组件和模块结构：

OrganizationsComponent.ts

import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
//declare function organizations_ag_Grid(): any;

@Component({
  selector: 'app-organizations',
  template: `<ag-grid-angular
    #agGrid
    style="width: 100%; height: 100%;"
    id="myGrid"
    class="ag-theme-alpine"
    [columnDefs]="columnDefs"
    [defaultColDef]="defaultColDef"
    [rowModelType]="rowModelType"
    [rowData]="rowData"
    (gridReady)="onGridReady($event)"
  ></ag-grid-angular>`,
  styleUrls: ['./organizations.component.css'],
})
export class OrganizationsComponent implements OnInit {
  public gridApi;
  public gridColumnApi;

  public columnDefs;
  public defaultColDef;
  public rowModelType;
  public rowData;
  constructor(private http: HttpClient) {
    this.columnDefs = [
      {
        field: 'athlete',
        minWidth: 220,
      },
      {
        field: 'country',
        minWidth: 200,
      },
      { field: 'year' },
      {
        field: 'sport',
        minWidth: 200,
      },
      { field: 'gold' },
      { field: 'silver' },
      { field: 'bronze' },
    ];
    this.defaultColDef = {
      flex: 1,
      minWidth: 100,
    };
    this.rowModelType = 'serverSide';
  }

  ngOnInit(): void {
    //organizations_ag_Grid();
  }

  onGridReady(params) {
    this.gridApi = params.api;
    //this.gridColumnApi = params.columnApi;

    this.http
      .get('https://www.ag-grid.com/example-assets/olympic-winners.json')
      .subscribe((data) => {
        var fakeServer = createFakeServer(data);
        var datasource = createServerSideDatasource(fakeServer);
        params.api.setServerSideDatasource(datasource);
      });
  }
}

function createServerSideDatasource(server) {
  return {
    getRows: function (params) {
      console.log('[Datasource] - rows requested by grid: ', params.request);
      var response = server.getData(params.request);
      setTimeout(function () {
        if (response.success) {
          params.success({ rowData: response.rows });
        } else {
          params.fail();
        }
      }, 500);
    },
  };
}
function createFakeServer(allData) {
  return {
    getData: function (request) {
      var requestedRows = allData.slice();
      return {
        success: true,
        rows: requestedRows,
      };
    },
  };
}

OrganizationsModule.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { OrganizationsComponent } from './organizations.component';
import { OrganizationsRoutingModule } from './organizations-routing.module';
import { AgGridModule } from 'ag-grid-angular';

@NgModule({
  declarations: [OrganizationsComponent],
  imports: [
    CommonModule,
    OrganizationsRoutingModule,
    AgGridModule.withComponents([]),
  ],
})
export class OrganizationsModule {}

【问题讨论】：

标签： angular ag-grid

【解决方案1】：

服务器端行模型仅支持AG-Grid企业版。

“如果使用AG Grid Community，如果要将所有数据加载到浏览器中，请使用客户端行模型，或无限行模型如果你想分块加载它。

如果使用 AG Grid Enterprise，如果要将所有数据加载到浏览器中，请使用 客户端行模型，或 服务器端行模型 如果你想分块加载它。

服务器端行模型是无限行模型以及更多。因此，如果您是 AG Grid Enterprise 客户，您应该更喜欢服务器端行模型而不是无限行模型。 "

https://www.ag-grid.com/javascript-data-grid/row-models/

【讨论】：