Telerik KendoUI Angular2网格-页面大小下拉列表不更新网格中显示的记录项

我试图使用Telerik新的KendoUI Angular 2网格控件，而更改pageSize的下拉列表似乎不会更新网格的大小以显示所选记录的数量。它会更改页数和页面信息（100项中的1-10项），但不会更改网格本身。我做错什么了吗？以下是Telerik在其网站上提供的代码片段，该代码片段在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
        };
    }
}

从'@angular/core'导入{Component}；
@组成部分({
选择器：“我的应用程序”，
模板：`


寻呼机的类型：
数字的
输入


按钮的最大数量：


显示信息


显示页面大小



显示上一个/下一个按钮



`
})
导出类AppComponent{
私有gridView:GridDataResult；
私有按钮计数：数字=5；
私有信息：布尔值=true；
私有类型：“数值”|“输入”=“数值”；
私有页面大小：布尔值=true；
private-previousNext:boolean=true；
私有页面大小：数字=5；
私有跳过：编号=0；
私有产品：any[]=Array（100）.fill（{}）.map（（x，idx）=>({
“ProductID”：idx，
“产品名称”：“产品”+idx，
“已终止”：idx%2==0
}));
构造函数（）{
这是loadProducts（）；
}
受保护的页面更改（{skip}:PageChangeEvent）：无效{
this.skip=跳过；
这是loadProducts（）；
}
受保护的排序更改（排序：SortDescriptor[]）：void{
这是loadProducts（）；
}
私有loadProducts（）：void{
this.gridView={
数据：this.products.slice（this.skip，this.skip+this.pageSize），
总计：此.products.length
};
}
}

要实现此功能，应在pageChange事件处理程序中更新pageSize，如下所示：

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

---

如果我将pageSize从10更改为100，它将加载100个项目。网格当然会增加其高度。如果我再回到pageSize 10，网格将保持相同的高度。我有10个项目，然后是之前显示的空白区域，其他90个项目，然后是寻呼机。这是预期的还是我遗漏了什么？