AG Grid 26.0.0 Angular12.2 infinite行模型服务端分页切换页长重复加载问题

问题根源 #

AG Grid无限行模型要求cacheBlockSize（缓存块大小）必须和paginationPageSize（分页页长）保持一致，你仅在切换页长时修改了分页页长参数，未同步更新缓存块大小，导致内部缓存逻辑紊乱，出现重复请求相同数据的问题。

修复方案 #

1. 修改页长切换逻辑 #

调整你的onPageSizeChanged方法，同步更新两个核心参数并刷新缓存：

onPageSizeChanged(event: any) {
  const newPageSize = Number(event.target.value);
  // 同步更新分页页长和缓存块大小
  this.gridApi.paginationSetPageSize(newPageSize);
  this.gridApi.setCacheBlockSize(newPageSize);
  // 清空历史缓存，触发按新页长重新加载数据
  this.gridApi.refreshInfiniteCache();
  // 若切换后需要回到第一页，可添加以下代码
  // this.gridApi.paginationGoToFirstPage();
}

2. 移除冗余配置 #

无限行模式下数据由内部datasource统一管理，不需要手动绑定rowData，可直接删除模板中ag-grid-angular标签上的[rowData]="rowData"属性，避免和内部数据逻辑冲突。

验证 #

修改后切换页长时会自动清空旧缓存，按新的页长和缓存块大小请求数据，不会再出现重复加载相同数据的问题。

内容的提问来源于stack exchange，提问作者alext