Изменение размера блока страницы и кеша в ag-grid вызывает бесконечную загрузку элементов

Я хочу обновить данные для каждой страницы, используя серверный режим 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);
    }

Я хочу иметь возможность динамически изменять размер элементов страницы, сохраняя повторную выборку данных при изменении страницы.


typescript angular pagination server-side ag-grid-angular
person lolplayer101    schedule 21.06.2019    source источник
comment
где вы можете выяснить, как это делается? меня поразила похожая ситуация   -  person priyanka    schedule 05.04.2020

Ответы (3)


arrow_upward
2
arrow_downward

Ни один из ответов, которые я нашел, не работает в последних версиях 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();
person Tim    schedule 17.03.2021

arrow_upward
0
arrow_downward

У меня тоже такая же проблема, и я использую трюк, чтобы решить ее. Я установил значение 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);
}
person Meysam Sahragard    schedule 27.07.2021

arrow_upward
-1
arrow_downward

чтобы изменить cacheBlockSize, используйте частный элемент gridApi gridOptionsWrapper:

onPageSizeChanged(newPageSize) {
      this.gridApi.paginationSetPageSize(newPageSize);
      const api: any = this.gridApi;
      api.gridOptionsWrapper.setProperty('cacheBlockSize', Number(newPageSize));
    }
person Erikas Pliauksta    schedule 21.05.2020
comment
Это сработало для меня! - person Athreya M R Bhatt; 03.06.2021