Telerik Kendo UI Angular Grid-页面大小下拉菜单未更新网格中显示的记录项

Question

我正在尝试使用 Telerik 的新 KendoUI Angular 2 Grid 控件，并且更改 pageSize 的下拉菜单似乎不会更新网格的大小以显示所选记录的数量。它会更改页数和 pageInfo（100 个项目中的 1-10 个），但不会更改网格本身。难道我做错了什么？以下是 Telerik 在其网站上提供的代码 sn-p 在 Plnkr 中也不起作用。谢谢。

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <ul class="configurator">
      <li>
        <label for="type">Type of the pager:
            <select id="type" [(ngModel)]="type">
                <option value="numeric">Numeric</option>
                <option value="input">Input</option>
            </select>
        </label>
      </li>
      <li>
        <label for="buttonCount">Maximum number of buttons:
            <input id="buttonCount" class="k-textbox" type="number" [(ngModel)]="buttonCount"/>
        </label>
      </li>
      <li>
        <label for="info"><input id="info" type="checkbox" [(ngModel)]="info">Show info</label>
      </li>
      <li>
        <input id="pageSizes" type="checkbox" [(ngModel)]="pageSizes">
        <label for="pageSizes">Show page sizes</label><br>
      </li>
      <li>
        <input id="previousNext" type="checkbox" [(ngModel)]="previousNext">
        <label for="previousNext">Show previous / next buttons</label><br>
      </li>
     </ul>

      <kendo-grid
          [data]="gridView"
          [pageSize]="pageSize"
          [skip]="skip"
          [pageable]="{
            buttonCount: buttonCount,
            info: info,
            type: type,
            pageSizes: pageSizes,
            previousNext: previousNext
          }"
          [scrollable]="'none'"
          (pageChange)="pageChange($event)"
        >
      </kendo-grid>
  `
})
export class AppComponent {
    private gridView: GridDataResult;

    private buttonCount: number =  5;
    private info: boolean = true;
    private type: 'numeric' | 'input' = 'numeric';
    private pageSizes: boolean = true;
    private previousNext: boolean = true;

    private pageSize: number = 5;
    private skip: number = 0;
    private products: any[] = Array(100).fill({}).map((x, idx) => ({
        "ProductID": idx,
        "ProductName": "Product" + idx,
        "Discontinued": idx % 2 === 0
    }));

    constructor() {
        this.loadProducts();
    }

    protected pageChange({ skip }: PageChangeEvent): void {
        this.skip = skip;
        this.loadProducts();
    }

    protected sortChange(sort: SortDescriptor[]): void {
        this.loadProducts();
    }

    private loadProducts(): void {
        this.gridView = {
            data: this.products.slice(this.skip, this.skip + this.pageSize),
            total: this.products.length
        };
    }
}

Answer 1

要完成这项工作，应该在 pageChange 事件处理程序中更新 pageSize，类似于以下内容：

protected pageChange({ skip, take }: PageChangeEvent): void {
    this.skip = skip;
    this.pageSize = take;
    this.loadProducts();
}