Question

我正在使用Kendo UI Grid for Angular和分页。当我单击新页面或箭头时，它会调用pageChange事件，该事件更新State的跳过并获取属性并调用服务以获取新数据。但是，分页器按钮不会更新，因此它总是看起来选择了第一个按钮，范围为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）来帮助解决这个问题。

提前致谢！

Answer 1

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

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

如果同时启用多个数据操作（如分页，排序，过滤等），则更方便的方法是使用dataStateChange事件代替操作整个状态，如下例所示： / p>

Grid with data operations

Telerik Kendo UI Grid Paginator未更新页面已选中

1 个答案: