滚动页面时Ag-grid服务器端infiniteScroll不断获取数据答案

【问题标题】：Ag-grid server-side infiniteScroll keeps fetching data when scroll the page滚动页面时Ag-grid服务器端infiniteScroll不断获取数据
【发布时间】：2020-02-26 12:28:49
【问题描述】：

我正在尝试创建一个基本的服务器端infiniteScroll 数据表。我设置cacheBlockSize = 20，maxBlocksInCache = 1。这样每次从服务器加载20条记录，缓存中只保留一页数据。此设置使我更容易了解数据加载的工作原理。它在一开始就正确加载了第一页。但是当我向下滚动到接下来的 20 条记录时，它应该调用 API 并加载新的 20 条记录，然后将它们呈现在页面上。但它会一次又一次地调用 API。

我这样设置网格选项：

gridOptions: {
    headerHeight: 45,
    rowHeight: 30,
    rowModelType: 'serverSide',
    rowSelection: 'multiple',
    blockLoadDebounceMillis: 500,
    cacheBlockSize: 20,
    maxBlocksInCache: 1,
    pagination: false,
},

数据源在这里：

export class MyDatasource implements IServerSideDatasource {
  getRows(params: IServerSideGetRowsParams) {
    this.searchApi.getData().subscribe(
        resp => {
            let lastRow = -1;
            if (resp['totalRecords'] <= params.request.endRow) {
                lastRow = resp['totalRecords'];
            }
            params.successCallback(resp['data'], lastRow);
        },
        error => {
            params.failCallback();
            console.log(error);
        },
    );
  }
}

【问题讨论】：

标签： angular ag-grid

【解决方案1】：

查看有关缓存的文档： https://www.ag-grid.com/javascript-grid-server-side-model-infinite/#cache-configuration

如果您阅读了有关 maxBlocksInCache 属性的信息，它会谈到当它设置得太低时会发生什么：

如果使用，请确保缓存中有足够的块来显示表格的一个完整视图（即可滚动区域内的内容），否则它将不起作用，并且会发生请求块的无限循环。

【讨论】：