0

ビジュアル スタジオで Kendo グリッド コントロールを使用して Angular 2 アプリを構築しています。ページング機能のコードを書きましたが、機能していないようです。誰か助けてくれませんか？

risk-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();
    }
};

risk-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);
    }

}
4

2 に答える 2

1

KendoGrid では、仮想スクロールとページングを同時に行うことはできません。

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

ページングを探している場合は、削除してください[scrollable]="'virtual'"

これを参照できます

于 2016-10-23T10:26:18.273 に答える
0

リスク データを this.data 配列に割り当てなかったと思います。null 値になる this.data.slice(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();
}

};

Risk-listcomponent.html では、risks の代わりにビューを [data] に割り当てます。

<kendo-grid [data]="view"
        [skip]="skip"
  ....
于 2016-10-23T12:32:19.153 に答える