AG Grid：当 gridOptions.rowModelType 为 'serverSide' 时，您只能使用企业数据源

Question

我们有农业网格的企业许可证。我正在尝试将服务器端数据源绑定到 ag-grid，但它没有调用服务器数据源方法并在控制台中给出此警告 "AG Grid: you can only use an enterprise datasource when gridOptions.rowModelType is 'serverSide'" 。

我已经在组件模块中提供了正确的密钥、导入的 ag-grid-enterprise。

组件模板：

     <ag-grid-angular [columnDefs]="columns" [rowData]="rowData" [pagination]="true"
       [paginationPageSize]="itemsPerPage" [suppressDragLeaveHidesColumns]="true"
       [enableCellTextSelection]="true" [defaultColDef]="defaultColDef" [suppressExcelExport]="false"
       [suppressContextMenu]="false" [frameworkComponents]="frameworkComponents" [popupParent]="popupParent"
       class="ag-theme-balham" style="width: 100%; height: 550px" (gridSizeChanged)="onGridSizeChanged($event)"
       (gridReady)="onGridReady($event)" (firstDataRendered)="headerHeightSetter($event)"
       (columnResized)="headerHeightSetter($event)" [sideBar]="sideBar" [rowModelType]="rowModelType"
       [cacheBlockSize]="cacheBlockSize" [serverSideStoreType]="serverSideStoreType">
     </ag-grid-angular>

Component.ts:

  private gridApi;
  private gridColumnApi;
  public rowData: [];
  itemsPerPage: number = 100;
  rowModelType: 'serverSide';
  serverSideStoreType: 'full';
  cacheBlockSize: 20;

...

  onGridReady(params) {
    this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;
    var datasource = this.createServerSideDatasource();
    params.api.setServerSideDatasource(datasource);
    this.gridApi.resetRowHeights();
  }

...

 createServerSideDatasource() {
    return {
      getRows: function (params) {
        console.log('[Datasource] - rows requested by grid: ', params.request);
        //TODO: offset and limit should be sent based on the pagination.. 
        let inputPayload = {
          offset: this.offset,
          limit: this.itemsPerPage
        }

        this.apiService.execute(ApiEndPoint.Products, inputPayload).subscribe((res: any) => {
          console.log(res);
          params.success({
            rowData: res.body[0].data,
            rowCount: res.body[0].data.length // response.lastRow,
          });
        }, err => {
          console.log(err);
          params.fail();
        });
      }
    };
  }

我不确定我在这里遗漏了什么。 ClientModel 仍然工作正常。

Answer 1

不要在网格上设置 rowData 属性。这样做意味着客户端行模型。

Answer 2

哦，这是我的错..我们在 Angular 中经常犯的典型错误是我们有时忽略定义数据类型而单独分配值。

在 component.ts 中，我在分配值时犯了错误：

  private gridApi;
  private gridColumnApi;
  public rowData = []; // earlier it was like this -> public rowData: [];
  itemsPerPage: number = 100;
  rowModelType = 'serverSide'; // earlier it was like this -> rowModelType: 'serverSide';
  serverSideStoreType = 'full'; // earlier it was like this -> serverSideStoreType: 'full';
  cacheBlockSize = 20; // earlier it was like this -> cacheBlockSize: 20;

更正此问题后，网格已按预期提取数据！