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

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 中的 block 大小, 除了设置新的页面大小。这两个变量都是私有(private)的，所以不能保证它会继续工作，但是 ag-grid 没有给你任何正式的方法来改变无限行模型的页面大小。请务必使用 <any>作为 gridOptions 的类型或 gridApi所以 typescript 将允许您访问私有(private)成员:

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();