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

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

但是出现两个错误: enter image description here

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

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,
      };
    },
  };
}

组织模块.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 {}
stack overflow AG Grid could not find matching row model for rowModelType serverSide
原文答案

答案:

作者头像

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

“如果使用 AG Grid Community,如果您想将所有数据加载到浏览器中,请使用 Client-Side Row Model,或者如果您想以块的形式加载数据,请使用 Infinite Row Model

如果使用 AG Grid Enterprise,如果您想将所有数据加载到浏览器中,请使用 客户端行模型,或者如果您想以块的形式加载数据,请使用 服务器端行模型 .

服务器端行模型是无限行模型加上更多。因此,如果您是 AG Grid Enterprise 客户,您应该更喜欢服务器端行模型而不是无限行模型。 “

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

作者头像

由于 serverSide 行模型类型是企业包的一部分,您需要将 ag-grid-enterprise 添加到您的 package.json 依赖项中,然后将以下内容添加到您的应用程序代码中。这将启用所有企业功能。

import `ag-grid-enterprise`;

请参阅有关设置企业功能 here 的文档。