如何在 ag-grid 的无限行模型中实现 pageSize 更改？

Question

我在 angular 6 中使用 ag-grid-community。我设置了 suppressPaginationPanel=true 并使用 Material paginator 来处理 paginator 事件。 对于行模型，我使用的是无限行模型。 我的下一个和上一个分页在使用以下 url 的服务器端调用时正常工作。

https://myservice.com/clients?pageIndex=0&pageSize=5 ;

但是我的页面大小更改不起作用。 我已经在 Material 分页器 pageChange 事件中实现了这个。 更改 pageSize 后，这实际上进入了无限循环，并且 getRows 被称为无限时间。

我还尝试了一些其他选项，如 paginationPageSizeChange()、paginationGoToFirstPage() 等。但没有一个有效。

每次当 pageSize 更改或单击下一个/上一个时，我都需要服务器端调用。

谁能指导如何使用 ag-grid 的无限行模型实现 pageSize 更改？

 export class ClientsComponent implements OnInit {

      gridOptions: GridOptions = <GridOptions>{};
      gridApi: GridApi;
      columnApi: ColumnApi;
      clientQuery= {
        pageIndex: 0,
        pageSize: 5,'
      };

      columnDef = [
        {field: 'ClientName', headerName:"Cline Name", suppressMenu: true},
    {field: 'ServerName', headerName: "Server Name", suppressMenu: true},];

      @ViewChild(MatPaginator) paginator: MatPaginator;

      constructor(private service: MyService) {
      }

      ngOnInit() {
        this.gridOptions.pagination = true;
        this.gridOptions.rowModelType = 'infinite';
        this.gridOptions.paginationPageSize = 5;
        this.gridOptions.cacheBlockSize = 5;
        this.gridOptions.maxBlocksInCache = 1;
        this.gridOptions.suppressPaginationPanel = true;
        this.gridOptions.infiniteInitialRowCount = 5;
      }

      gridReady(event: GridReadyEvent){
        this.gridApi = event.api;
        this.columnApi = event.columnApi;
        event.api.setDatasource(this.dataSource);
      }

      dataSource: IDatasource = {
        rowCount: null,
        getRows: params => {
          this.service.getAllClients(this.clientQuery).toPromise().then(data => {            
              this.paginator.length = data.totalRecords;
              params.successCallback(data.items, data.totalRecords);
          })
        }
      }

      pageChange(event: PageEvent) {  //this is material paginator pageChange event
        if(event.pageSize !== this.clientQuery.pageSize){
          //this is page size change block;
          this.clientQuery.pageSize = event.pageSize;
          this.clientQuery.pageIndex = 0;
          this.gridOptions.cacheBlockSize = event.pageSize;
          this.gridOptions.paginationPageSize = event.pageSize;
          this.gridApi.paginationGoToPage(0);
        } else {
          this.clientQuery.pageIndex = event.pageIndex;
          this.gridApi.paginationGoToPage(event.pageIndex);
        }
      }

    }

Answer 1

此处的文档中对此进行了介绍：

https://www.ag-grid.com/javascript-grid-pagination/#customising-pagination

你可以看到你需要如何调用一个方法来改变这个：

function onPageSizeChanged(newPageSize) {
    var value = document.getElementById('page-size').value;
    gridOptions.api.paginationSetPageSize(Number(value));
}

希望这可以帮助

Answer 2

我遇到了同样的问题，发现可能是因为我对自定义数据源做了一个解决方法，以实现服务器端分页。 我不知道你的原因，但我看到你也制作了自己的 IDatasource 对象，所以对我有用的东西也可能对你有用。

我刚刚将以下代码段粘贴到我的 pageSizeChange 函数中：

// Force new cache block size by resetting internal cache
this.gridOptions.api.gridOptionsWrapper.setProperty('cacheBlockSize', pageSize);
this.gridOptions.api.infinitePageRowModel.resetCache();

// After that, update the pageSize through the api
this.gridOptions.api.paginationSetPageSize(pageSize);

我在这里找到它，提交了一个非常相似的问题： https : //github.com/ag-grid/ag-grid/issues/2202

希望它也适用于你。 祝你好运！