Ag-grid after upgrading from V8 to V15 pagination does not work properly. Data source does not run after boot

Question

Background

Updated typescript to 2.6.2 from 2.3.4. The Ag grid has a compilation problem, so its upgrade to 15.0.0. After updating, the existing page code for ag-grid does not work.

Previous configuration - ag-grid and pagination work fine

click the search button on the button in the form searchCategory () will be called and load the grid

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

New configuration information

package.json

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

test.ts pagination replaced by infinite.

/ * rowModelType: 'pagination', * / rowModelType: "infinite", pagination: true,

Current behavior

searchCategory() , . , .

. Datasource

Answer 1

, . primeng pagination,

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

//html

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

//

import { PaginatorModule } from 'primeng/primeng';

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