更改 ag-grid 上的页面和缓存块大小会导致无限加载项目

Question

我希望使用 ag-grid 的“服务器端”模式重新获取每个页面的数据。为此，我使 maxBlocksInCache 1 和 cacheBlockSize 等于每页的项目数。直到这里它工作正常。

现在，当我更改每页的项目数时，网格开始通过获取数据自行循环。我假设这是因为 cacheBlockSize 在重新获取行（永远不会完成）后不可更改或更改。

现在我试图将缓存作为输入而不是 agGridOption ，但它什么也没改变。

<select #paginationSelect (change)="onPageSizeChanged(paginationSelect.value)" [(ngModel)]="itemsPerPage">
    <option [value]="item">2</option>
    <option [value]="item">10</option>
</select>
<ag-grid-angular
        [gridOptions]="gridOptions"
        [cacheBlockSize]="itemsPerPage"
        style="width: 100%; height: 250px;">
</ag-grid-angular>

this.gridOptions = {
            ...
            rowModelType: 'serverSide',
            pagination: true,
            paginationPageSize: this.itemsPerPage, // itemsPerPage is a class attribute attached to a select element using ngModel.
            maxBlocksInCache: 1,
            ...
}

// function called on change of select element value representing the number of items to display per page
onPageSizeChanged(newPageSize) {
        this.gridApi.paginationSetPageSize(newPageSize);
    }

我希望能够动态更改页面项目大小，同时保持页面更改时重新获取数据。

Answer 1

我遇到的所有答案似乎都不适用于最新版本的 ag-grid。

对我有用的是除了设置新的页面大小之外，还要确保在 中设置cacheBlockSize和块大小。cacheParams这两个变量都是私有的，因此不能保证这将继续工作，但 ag-grid 没有为您提供任何官方方法来使用无限行模型更改页面大小。确保使用typescript<any>的类型允许您访问私有成员：gridOptionsgridApi

const gridOptions: any = this.gridOptions;
gridOptions.api.gridCore.rowModel.cacheParams.blockSize = pageSize;
gridOptions.api.gridOptionsWrapper.setProperty('cacheBlockSize', pageSize);
gridOptions.api.paginationSetPageSize(pageSize);
gridOptions.api.purgeInfiniteCache();