使用 Api 时 Ag Grid 的无限卷轴不起作用

Question

我正在尝试通过 Angular Core 6.1.0 和 ag-grid - ^17.1.1 以及 ag-grid-angular - 17.1.0

中的以下代码实现无分页的无限滚动

https://stackblitz.com/edit/ag-grid-infinite-scroll-example

示例运行良好。但是当我引入 Api 从数据库中获取数据时，我在前端网格中得到空记录

我已将 onGridReady 方法更改如下

onGridReady(params: any) {
    console.log("onGridReady");
    this.clearAgGrid();

    this.gridApi = params.api;
    this.gridColumnApi = params.gridColumnApi;

    var dataSource: IDatasource = {
      getRows: (params: IGetRowsParams) => {
        this.userService.GetUserDetails(this.loginUserId).subscribe(data => {
          this.rowData = data;
          params.successCallback(data, 1000);
        })
      }
    }
    this.gridOptions.rowModelType = 'infinite';
    this.gridOptions.dataSource = dataSource;
    params.api.setDataSource(this.rowData);
}

clearAgGrid() {
    let self = this;
    let dataSource = {
      getRows(params: any) {
        params.successCallback([], 0);
      }
    };
    this.gridOptions.api.setDatasource(dataSource);
}

this.gridOptions = {
  rowSelection: 'single',
  cacheBlockSize: 100,
  maxBlocksInCache: 2,
  enableServerSideFilter: false,
  enableServerSideSorting: true,
  rowModelType: 'infinite',
  pagination: false,
  paginationAutoPageSize: true
};

html文件中的代码如下

<ag-grid-angular style="width: 100%; height: 100%" class="ag-theme-balham"
                [gridOptions]="gridOptions"
                [columnDefs]="columnDefs"
                [rowData]="rowData"
                (gridReady)="onGridReady($event)"
                #grid
></ag-grid-angular>

列定义如下

this.columnDefs = [
  { field: 'UserName' },
  { field: 'EmailId' },
  { field: 'MobileNo' },
  { field: 'Address' },
  { field: 'IsActive' }
];

API定义如下

public GetUserDetails(userId: string): Observable<User[]> {
    return this.httpClient.put<User[]>(this.uriBase + '/GetUserDetails/' + userId, { headers: { 'Content-type': 'application/json' } }).pipe(share());
}

即使数据来自其他场景，相同的数据也不会出现在前端无限网格中。

如有任何帮助，我们将不胜感激。

Answer 1

在您的 onGridReady 方法中，您应该使用数据源对象而不是行数据来调用 setDatasource。所以该方法的修改版本如下所示：

  onGridReady(params: any) {
    console.log("onGridReady");
    this.clearAgGrid();
                
    this.gridApi = params.api;
    this.gridColumnApi = params.gridColumnApi;
                
    var dataSource: IDatasource = {
      getRows: (params: IGetRowsParams) => {
        this.userService.GetUserDetails(this.loginUserId).subscribe(data => {
          // no need to provide row data actually. You can omit this line
          this.rowData = data; 
          params.successCallback(data, 1000);
        })
      }
    }
    this.gridOptions.rowModelType = 'infinite';
    // no need for this line either
    this.gridOptions.dataSource = dataSource; 
    // pass the dataSource object instead of the row data
    params.api.setDatasource(dataSource); 
  }

参考：Angular Data Grid: Infinite Row Model

使用 Api 时 Ag Grid 的无限卷轴不起作用

Infinite Scroll of Ag Grid not working when using Api

ag-grid

angular

ag-grid-angular