Telerik Kendo UI Grid分页器未更新页面

Question

我正在使用Kendo UI Grid for Angular进行分页。当我点击一个新的页面或箭头时，它会调用pageChange事件来更新状态的skip和take属性，并调用服务来获取新数据。但是，分页按钮不会更新，因此它始终显示第一个按钮，其中x个项目的范围为1 - 25个，作为标签。

的看法是

<kendo-grid [data]="results" 
     [pageable]="pageOptions" [pageSize]="state.take" 
     [sortable]="sortOptions" [sort]="sort" 
     (pageChange)="pageChange($event)" 
     (sortChange)="sortChange($event)"> 
    <kendo-grid-column field="myField" title="Title" width="80"> 
    </kendo-grid-column>... 
</kendo-grid> 

和组件

import { Component, OnInit, Input, ViewEncapsulation } from '@angular/core'; 
import { CurrencyPipe, DatePipe } from '@angular/common'; 
import { Observable } from 'rxjs/Rx'; 
import { State, SortDescriptor, orderBy } from '@progress/kendo-data-query'; 
import { GridDataResult, PageChangeEvent } from '@progress/kendo-angular-grid'; 
... 

@Component({ 
    selector: 'my-component', 
    templateUrl: './my-component.component.html', 
    styleUrls: [ 
     './my-component.component.css', 
     './../../../../node_modules/@progress/kendo-theme-material/dist/all.css' 
    ], 
    encapsulation: ViewEncapsulation.None 
}) 
export class MyComponent implements OnInit { 
    @Input() filters: any; 

    private results: GridDataResult; 

    rowOptions: any = [25, 50, 100]; 

    state: State = { 
     skip: 0, 
     take: this.rowOptions[0] 
    }; 

    pageOptions: any = { 
     buttonCount: 5, 
     info: true, 
     type: 'numeric', 
     pageSizes: this.rowOptions, 
     previousNext: true 
    }; 
    ... 

    constructor(private myService: MyService) { } 

    ngOnInit() { 
     if (this.filters) { 
      ... 
      this.state.skip = this.filters.offset || undefined; 
      this.state.take = this.filters.count || this.rowOptions[0]; 
      this.getResults(); 
     } 
    } 

    getResults() { 
     ... 
     this.myService.resultsGet(
      ... 
      this.state.take, 
      this.state.skip 
     ).subscribe(
      (pagedList: any) => { 
       this.results = { 
        data: pagedList.results, 
        total: pagedList.total 
       }; 
      }, 
      e => console.log(`error: ${e}`) 
     ); 
    } 

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

是否有别的东西，需要更新，以获得分页程序更新的结果？我没有在GridDataResult上看到任何其他属性（例如start或skip）来帮助解决这个问题。

提前致谢！

Answer 1

的skip属性也需要被结合到电网状态，从而使当前页面被正确地更新：如果多个数据操作同时启用（如寻呼，排序，过滤等

<kendo-grid [data]="results" 
    [pageable]="pageOptions" [pageSize]="state.take" [skip]="state.skip" 
    [sortable]="sortOptions" [sort]="sort"... 

），更方便的办法是改用dataStateChange事件和操作就像在下面的例子中整体状态：

Grid with data operations