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

【问题标题】：Changing page and cache block size on ag-grid causes infinite loading of items在 ag-grid 上更改页面和缓存块大小会导致项目无限加载
【发布时间】：2019-11-04 07:55:09
【问题描述】：

我希望使用 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);
    }

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

【问题讨论】：

你在哪里知道这是怎么做到的？我遇到了类似的情况
非常感谢您分享信息。我遇到了同样的问题。

标签： angular typescript pagination server-side ag-grid-angular

【解决方案1】：

我遇到的所有答案似乎在最新版本的 ag-grid 中都不起作用。

除了设置新的页面大小外，对我有用的是确保同时设置cacheBlockSize 和cacheParams 中的块大小。这两个变量都是私有的，因此不能保证它会继续工作，但是 ag-grid 并没有为您提供任何官方方法来使用无限行模型更改页面大小。确保使用<any> 作为gridOptions 或gridApi 的类型，以便打字稿允许您访问私有成员：

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

【讨论】：

感谢您的信息。进行您建议的更改后，我面临另一个问题。我可以选择更改页面大小。当我更改大小时，会触发多个 getrows 调用。任何防止多次调用获取行方法的建议
这对我有用，当将页面大小从 50 更改为 250 时，我加载了相同的项目（由于初始缓存大小被定义为 50）。非常感谢@Tim

【解决方案2】：

我也有同样的问题，用一个技巧来解决它。我将cacheBlockSize 的值设置为页面选择器的最大值。现在，如果我们假设页面选择器的最大值等于 100，并且选择的页面大小等于 10，首先我们得到 100 行，当页面索引达到 11 时，我们得到接下来的 100 行，并且分页工作正常。虽然，我们不能以这种方式单独接收每个页面。

<div class="page-size-selector">
  Page Size:
  <select (change)="onPageSizeChanged($event)" [ngModel]="pageSize">
    <option value="10">10</option>
    <option value="25">25</option>
    <option value="50">50</option>
    <option value="100">100</option>
  </select>
</div>


pageSize = 10;
blockSize = 100;

this.gridOptions = {
rowModelType: 'serverSide',
serverSideStoreType: ServerSideStoreType.Partial,
paginationPageSize: this.pageSize,
cacheBlockSize: this.blockSize,
pagination: true,
animateRows: true,
domLayout: 'autoHeight',
 };


onPageSizeChanged(event: any): void {
  this.pageSize = Number(event.currentTarget.value);
  this.gridApi.paginationSetPageSize(this.pageSize);
}

【讨论】：