Telerik Kendo UI 网格分页器未更新所选页面

Question

我在 Kendo UI 网格中使用 Angular 分页。当我点击一个新的页面或箭头时，它会调用 pageChange 事件来更新状态的跳过和获取属性并调用服务来获取新数据。但是，分页器按钮不会更新，所以它总是显示第一个按钮被选中，范围为 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 上看到任何其他属性（例如开始或跳过）来帮助解决这个问题。

提前致谢！

Answer 1

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

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

如果同时启用多个数据操作（如分页、排序、过滤等），更方便的方法是改用 dataStateChange 事件并操纵整个状态，如下例所示:

Grid with data operations

Telerik Kendo UI 网格分页器未更新所选页面

Telerik Kendo UI Grid Paginator not updating page selected

pagination

kendo-grid

kendo-ui-angular2

angular