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

【问题标题】：AG Grid: you can only use an enterprise datasource when gridOptions.rowModelType is 'serverSide'AG Grid：当 gridOptions.rowModelType 为“serverSide”时，您只能使用企业数据源
【发布时间】：2022-01-18 04:37:05
【问题描述】：

我们拥有 ag-grid 的企业许可证。我正在尝试将服务器端数据源绑定到 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>

组件.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 仍然可以正常工作。

【问题讨论】：

标签： ag-grid

【解决方案1】：

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

【讨论】：

删除它没有帮助。我正在使用网格 v26.2.0。我不确定这个版本在绑定到服务器端数据源或期望我们遵循任何特定的接口类型方面是否有任何问题。

【解决方案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;

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

【讨论】：