Telerik Kendo UI Grid Paginator 未更新所选页面答案

【问题标题】：Telerik Kendo UI Grid Paginator not updating page selectedTelerik Kendo UI Grid Paginator 未更新所选页面
【发布时间】：2017-09-23 16:35:36
【问题描述】：

我正在使用 Kendo UI Grid for Angular 进行分页。当我单击新页面或箭头时，它会调用 pageChange 事件来更新 State 的 skip 和 take 属性，并调用服务来获取新数据。但是，分页器按钮不会更新，因此它似乎总是选择第一个按钮，其中包含 1 - 25 个 x 项的范围作为标签。

观点是

<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）来帮助解决这个问题。

提前致谢！

【问题讨论】：

标签： angular pagination kendo-grid kendo-ui-angular2

【解决方案1】：

skip属性也需要绑定Grid状态，才能正确更新当前页面：

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

如果同时启用多个数据操作（如分页、排序、过滤等），更方便的方法是使用 dataStateChange 事件并像以下示例一样操作整个状态：

Grid with data operations

【讨论】：

dataStateChange 非常完美！我能够合并 pageChange 和 sortChange 事件。