将 [pageSize] 属性添加到 Kendo 网格后的 ExpressionChangedAfterItHasBeenCheckedError

Posted 2023-03-28

【中文标题】将 [pageSize] 属性添加到 Kendo 网格后的 ExpressionChangedAfterItHasBeenCheckedError

【英文标题】：ExpressionChangedAfterItHasBeenCheckedError after adding [pageSize] attribute to Kendo grid

【发布时间】：2019-12-15 20:08:15

【问题描述】：

请找到附加的代码，让我知道在 Angular CLI 中运行代码时出现错误的可能原因。 如果我删除 [pageSize]="5"，此错误将消失，但不会在下拉列表中显示默认页面大小。 要求就像在网格顶部显示第二个寻呼机

<kendo-grid #grid class="k-grid-expand-row inner-grid" [kendoGridBinding]="gridData" [height]="530" [pageSize]="5" [skip]="skip" [pageable]="true" [sortable]="true" [filterable]="IsFilterVisible" (pageChange)="onPageChange($event)" [selectable]="enabled: true, checkboxOnly: true"
  [loading]="loading" [selectedKeys]="selectedItems" [resizable]="true" [kendoGridSelectBy]="selectionKey" (cellClick)="rowClick($event)">
  <ng-template kendoGridToolbarTemplate position="top">
    <div class="d-flex k-grid-toolbar-content ">
      <div class="pagination-container">
        <p>Show</p>
        <kendo-pager-page-sizes [pageSizes]="[5,10,20,40]"></kendo-pager-page-sizes>
          <kendo-pager-prev-buttons id="ibtPagination Button"></kendo-pager-prev-buttons>
          <kendo-pager-input></kendo-pager-input>
          <kendo-pager-next-buttons id="ibtPagination Button"></kendo-pager-next-buttons>
    </div>
    </div>
  </ng-template>
  <kendo-grid>

【问题讨论】：

您使用的是什么版本的剑道 UI？

@progress/kendo-angular-grid": "^4.1.1 这个版本我正在使用。

【参考方案1】：

我在组件类中添加了以下代码。

constructor(public cdRef: ChangeDetectorRef)  

ngAfterViewInit() 
this.cdRef.detectChanges();

它解决了我的问题。

【参考方案2】：

有一个带有 pageSize 属性的issue with Kendo UI grid。将包更新到 4.1.0 版本可以解决此问题。