Telerik Kendo UI 격자 표식기가 선택된 페이지를 업데이트하지 않습니다.

Question

각도를 사용하여 검도 UI 격자를 페이지 매김과 함께 사용하고 있습니다. 새 페이지 나 화살표를 클릭하면 상태 건너 뛰기 및 속성 가져 오기를 업데이트하고 새 데이터를 가져 오기 위해 서비스를 호출하는 pageChange 이벤트를 호출합니다. 그러나 페이지 매기기 단추는 업데이트되지 않으므로 레이블로 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에 다른 속성 (예 : 시작 또는 건너 뛰기)이 표시되지 않았습니다.

미리 감사드립니다.

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

여러 데이터 동작들이 (페이징 등 소팅, 필터링, 등을 동시에 사용할 수있는 경우 : 현재 페이지가 올바르게 갱신되도록

Answer 1

skip 속성은 격자 상태로 결합 될 필요), 더 편리한 방법 대신 dataStateChange 이벤트를 사용하여 다음과 같은 예처럼 전체 상태를 조작하는 것입니다 :

Grid with data operations