提问人：lolplayer101 提问时间：6/21/2019 更新时间：7/27/2021 访问量：9330
在 ag-grid 上更改页面和缓存块大小会导致项目无限加载
Changing page and cache block size on ag-grid causes infinite loading of items
问：
我希望使用 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);
}
我希望能够动态更改页面项目的大小，以保持在页面更改时重新获取数据。
答：
4赞
Tim
3/17/2021
#1
我遇到的所有答案似乎都不适用于最新版本的 ag-grid。
对我有用的是确保除了设置新的页面大小之外，还要在 中设置块大小和块大小。这两个变量都是私有的，所以不能保证它会继续工作，但 ag-grid 没有给你任何官方方法来使用无限行模型来更改页面大小。请确保用作 type for the type for the or so typescript will will you to access private members：cacheBlockSizecacheParams<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();
评论
0赞
Deepak
8/11/2021
谢谢你的信息。在进行您建议的更改后，我遇到了另一个问题。我可以选择更改页面大小。当我更改大小时，会触发多个对 getrows 的调用。任何防止多次调用获取行方法的建议
0赞
alext
9/27/2021
这对我有用，当将页面大小从 50 更改为 250 时，我加载了相同的项目（由于初始缓存大小定义为 50）。非常感谢@Tim
0赞
Mohan
4/22/2022
@Deepak我也面临着同样的问题，即触发了对 getrows 的多个调用。你有没有得到任何解决方案。
1赞
Meysam Sahragard
7/27/2021
#2
我也有同样的问题，用一个技巧来解决它。我将 的值设置为页面选择器的最大值。现在，如果我们假设页面选择器的最大值等于 100，所选页面大小等于 10，首先我们得到 100 行，当页面索引达到 11 时，我们得到接下来的 100 行，分页工作正常。虽然，我们不能以这种方式单独接收每个页面。cacheBlockSize
<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);
}
评论