从 V8 升级到 V15 分页后的 ag-grid 无法正常工作。初始加载后不执行数据源

Question

背景

已将打字稿从 2.3.4 升级到 2.6.2。 Ag 网格存在编译问题，因此已升级到 15.0.0。升级 ag-grid 的现有分页代码后无法正常工作。

以前的配置 - ag-grid 和分页工作正常

单击表单中的搜索按钮将调用 searchCategory() 方法并加载网格

package.json

"ag-grid": "^8.1.0",
"ag-grid-angular": "^8.1.0",
.....
 "typescript": "^2.3.4"

temp.ts

 gridOptions = <GridOptions>{
        context: {},
        paginationPageSize: AppUtils.IR_PAGINATION_SIZE,
/*        rowModelType: 'pagination',*/
        rowModelType: 'infinite',
        pagination: true,
        enableServerSideSorting: true,
        suppressDragLeaveHidesColumns: true,
        onGridSizeChanged: () => {
            this.gridOptions.api.sizeColumnsToFit();
        },
        getRowHeight: () => {
            return 32;
        },
         components: {
              getTypeDesc : function(params: any) {
        var eDiv = document.createElement('div');
        let desc = params.context.typeMaster.filter(function (item: any) {
            if (params.data.typeCode === item.typeCode) {
                return item.typeDescription;
            }
        });
        eDiv.innerHTML = '<span>' + desc[0].typeDescription + '</span>';
        return eDiv;
    },


    };
    typeMaster: TypeMasterModel[];
    categoryMaster: CategoryModel[];
    category: CategoryModel = new CategoryModel();
    severityMaster: SeverityMasterModel[];
    selectedRowsValue: number[];
    columnDefs: any[] = [
        { headerName: '', field: 'catCode', hide: true },
        { headerName: 'Category', field: 'catDesc', width: 550 },
        { headerName: 'Type', field: 'typeCode', cellRenderer:'getTypeDesc' }
        { headerName: 'PatientID', field: 'patIdMandYn' },
        { headerName: 'EquipmentID', field: 'equipIdMandYn' },
        { headerName: 'WorkorderId', field: 'workOrderMandYn' }
    ];
    action: string = '';


searchCategory() {
        let self = this;
        let dataSource = {
           rowCount: null, // 
            getRows: (params: any) => {
                this.http.get(//server call ).subscribe(res => {
                    let result = res['result'];
                    if (result != null && result.paginatedList != null) {
                        this.totalRecords = result.paginatedList.length;
                        if (this.totalRecords <= 0) {
                            this.gridStatusMessageDisplay("");
                        }
                        params.successCallback(result.paginatedList, result.totalRecords);
                    } else {
                        this.gridStatusMessageDisplay("");
                    }
                });
            }
        }
        this.gridOptions.api.setDatasource(dataSource);
    }

temp.html

新配置详细信息

package.json

ag-grid": "^15.0.0",
 "ag-grid-angular": "^15.0.0",
 "typescript": "^2.6.2"

test.ts 分页替换为无限。

/* 行模型类型: 'pagination',*/ rowModelType: 'infinite', 分页：真，

当前行为

调用 searchCategory() 时，会调用服务器并将数据加载到带有分页栏的网格中。在分页栏中单击下一步时，它不会调用已注册的数据源并停在那里。

预期行为 分页应该可以正常工作。应该在下一个和上一个调用数据源并更新网格

Answer 1

使用其他分页库解决这个问题，这里primeng分页，

https://www.primefaces.org/primeng/#/paginator

//html

<div *ngIf="totalRecords > catPaginationSize">
                 <p-paginator rows="10" totalRecords="{{totalRecords}}"   (onPageChange)="paginate($event)" ></p-paginator>
           </div>

//ts

import { PaginatorModule } from 'primeng/primeng';

 paginate(event: any) {
        this.startIndex = event.first;
        this.rowsPerPage = event.rows;
        this.paginatedList();
    }

从 V8 升级到 V15 分页后的 ag-grid 无法正常工作。初始加载后不执行数据源

ag-grid after upgrade from V8 to V15 pagination is not working properly,. Data source is not executed after initial loading

angularjs

ag-grid

typescript2.0

ag-grid-ng2