Angular项目中获取Syncfusion Grid页大小遇私有属性访问错误，如何解决？

问题场景 #

在Angular项目中使用Syncfusion Grid，需要在分页事件触发时获取当前页码和页大小。现有代码尝试直接访问Grid内部私有属性导致报错：

Property 'dropDownListObject' is private and only accessible within class 'PagerDropDown'.

原有代码如下：

component.html #

<ejs-grid #Grid class="data-grid" (recordDoubleClick)="onDoubleClick($event)" height="55vh" [dataSource]='dataSource'
            [allowPaging]="true" [allowResizing]="true" [allowSorting]="true" [allowFiltering]="true"
            [pageSettings]='pageSettings' (actionBegin)="onActionBegin($event)">
. . . .
. . . .
        </ejs-grid>

component.ts #

//For paging
@ViewChild("Grid") 
public grid!:GridComponent;
currentPage: number = 1;
pageSize: number = 50;
onActionBegin(e: any) {
  this.currentPage = this.grid.pagerModule.pagerObj.currentPage;  
  this.pageSize = this.grid.pagerModule.pagerObj.pagerdropdownModule.dropDownListObject.value
  console.log(this.pageSize)
}

解决方案 #

不能直接访问Syncfusion Grid内部的私有属性，正确做法是通过Grid公开的pageSettings属性获取当前页码和页大小，同时可通过事件参数过滤分页操作：

修改后的component.ts代码 #

@ViewChild("Grid") 
public grid!: GridComponent;
currentPage: number = 1;
pageSize: number = 50;

onActionBegin(e: any) {
  // 仅在分页操作触发时更新数据
  if (e.requestType === 'paging') {
    // 从公开的pageSettings属性中读取最新值
    this.currentPage = this.grid.pageSettings.currentPage;
    this.pageSize = this.grid.pageSettings.pageSize;
    console.log('当前页码:', this.currentPage, '页大小:', this.pageSize);
  }
}

说明 #

1. Syncfusion Grid的pageSettings是公开配置对象，其中currentPage和pageSize会自动同步分页操作后的最新值，无需访问内部私有模块。
2. 通过e.requestType === 'paging'可确保逻辑仅在分页操作触发时执行，避免排序、筛选等其他操作触发不必要的更新。

内容的提问来源于stack exchange，提问作者Alex Wright