角2 - 剣道UIグリッド。ページングが機能しない

Question

私は、Visual Studioで剣道グリッドコントロールを使ってAngular 2アプリを構築しています。私はページング機能のコードを書いていますが、うまくいきません。誰かが助けてくれましたか？

リスクlist.component.ts

import { Component, OnInit } from '@angular/core'; 
import { Risk } from './risk'; 
import { RiskService } from './risk.service'; 
import { GridModule, GridDataResult, PageChangeEvent, SortDescriptor, orderBy} from '@progress/kendo-angular-grid'; 

@Component({ 
    moduleId: module.id, 
    selector: 'rm-risks', 
    templateUrl: '/app/risk-list.component.html', 
    providers: [RiskService] 
}) 

export class RiskListComponent implements OnInit { 
    private gridView: GridDataResult; 
    private sort: SortDescriptor[] = []; 
    private data: any[]; 
    private pageSize: number = 10; 
    private skip: number = 0; 
    title = 'Risk List'; 
    risks: Risk[]; 


    constructor(private _riskService: RiskService) { 
     this.data = []; 
     this.getRisks(); 
     this.loadRisks(); 
    } 

    protected pageChange(event: PageChangeEvent): void { 
     this.skip = event.skip; 
     this.loadRisks(); 
    } 

    protected sortChange(sort: SortDescriptor[]): void { 
     this.sort = sort; 
     this.loadRisks(); 
    } 


    private loadRisks(): void { 
     this.gridView = { 
      data: this.data.slice(this.skip, this.skip + this.pageSize), 
      // data: orderBy(this.risks, this.sort), 
      total: this.data.length 
     }; 
    } 

    getRisks(): void { 
     this._riskService.getRisks().then(risks => this.risks = risks); 

    } 

    ngOnInit(): void { 
     this.getRisks(); 
    } 
}; 

リスクlist.component.html

<kendo-grid [data]="risks" 
      [skip]="skip" 
      [pageSize]="pageSize" 
      [scrollable]="'virtual'" 
      [rowHeight]="36" 
      [height]="300" 
      (pageChange)="pageChange($event)" 
      [pageable]="true" 
      [sortable]="{ mode: 'multiple' }" 
      [sort]="sort" 
      (sortChange)="sortChange($event)"> 
    <kendo-grid-column field="reference" title="Reference" width="120"> 
    </kendo-grid-column> 
    <kendo-grid-column field="insuredName" title="Insured Name" width="120"> 
    </kendo-grid-column> 
    <kendo-grid-column field="inceptionDate" title="Inception Date" width="120"> 
    </kendo-grid-column> 
    <kendo-grid-column field="riskType" title="Risk Type" width="120"> 
    </kendo-grid-column> 
    <kendo-grid-column field="status" title="Indication" width="120"> 
    </kendo-grid-column> 
    <kendo-grid-column field="grossPremium" title="Gross Premium" width="120"> 
    </kendo-grid-column> 
    <kendo-grid-column field="allocatedTo" title="Allocated To" width="120"> 
    </kendo-grid-column> 
    <kendo-grid-column field="allocatedCompany" title="Allocated Company" width="120"> 
    </kendo-grid-column> 
    <kendo-grid-column field="Discontinued" width="100"> 
     <template kendoCellTemplate let-dataItem> 
      <input type="checkbox" [checked]="dataItem.Discontinued" disabled /> 
     </template> 
    </kendo-grid-column> 
</kendo-grid> 

risk.service.ts

import { Injectable } from '@angular/core'; 
import { Risk } from './risk'; 
import { Risks } from './mock-risk'; 
import { Http, Response } from '@angular/http'; 
import { Observable } from 'rxjs/Observable'; 
import 'rxjs/add/observable/from'; 


@Injectable() 
export class RiskService { 

    getRisks(): Promise<Risk[]> { 
     return Promise.resolve(Risks); 
    } 

} 

Answer 1

ケンドーグリッドで仮想スクロールとページングを同時に呼び出すことはできません。

[scrollable]="'virtual'"を有効にすると、ページングが非表示になります。

あなたがページングを探している場合は、[scrollable]="'virtual'"

を削除するあなたはthis

Answer 2

を参照することができ、私はあなたがthis.data配列にリスクデータを割り当てるのdidnt、あなたが this.dataを使用してスライスしようとしていると思います。ヌル値となるスライス（this.skip、this.skip + this.pageSize）は

次のコード

export class RiskListComponent implements OnInit { 
private gridView: GridDataResult; 
private sort: SortDescriptor[] = []; 
private data: any[]; 
private pageSize: number = 10; 
private skip: number = 0; 
title = 'Risk List'; 
risks: Risk[]; 
risks1: Risk[]; 
view; 

constructor(private _riskService: RiskService) { 
    this.data = []; 
    this.getRisks(); 
    this.loadRisks(); 
} 

protected pageChange(event: PageChangeEvent): void { 
    this.skip = event.skip; 
    this.loadRisks(); 
} 

protected sortChange(sort: SortDescriptor[]): void { 
    this.sort = sort; 
    this.loadRisks(); 
} 


private loadRisks(): void { 
    this.view= { 
     data: this.risks1.slice(this.skip, this.skip + this.pageSize), 
     // data: orderBy(this.risks, this.sort), 
     total: this.risks1.length 
    }; 
} 

getRisks(): void { 
    this._riskService.getRisks().then(risks => this.risks1 = risks); 

} 

ngOnInit(): void { 
    this.getRisks(); 
} 

を試します210

};リスクlistcomponent.html代わりのリスクで

[データ]にビューを割り当てる

<kendo-grid [data]="view" 
     [skip]="skip" 
    ....