[英]Angular 2 - Kendo UI grid. Issue with sort implementation
我正在Visual Studio中使用asp.net開發angular 2應用程序。 呈現的HTML使用Kendo UI數據網格。 我正在嘗試實現,滾動和排序。 滾動效果非常好。 但是在嘗試實施排序時出現問題。 我收到一個錯誤
錯誤是“對象文字在嚴格模式下不能具有相同名稱的多個屬性。重復的標識符數據”。 這是編譯時錯誤
此錯誤是指loadRisks()方法中的數據屬性分配。 我是打字稿新手,需要一些幫助。 如何將order by子句分配給datagrid。 有人可以幫忙。
風險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)"
[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);
}
}
該錯誤意味着您不能像在loadRisks
方法中那樣具有重復的屬性。 在您的對象中查看重復data
屬性。
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
};
}
您應該合並這些表達式或創建一個返回所需數據值的函數。 例如:
private loadRisks(): void {
this.gridView = {
data: this.handleData(),
total: this.data.length
};
}
private handleData() {
var pagedData = this.data.slice(this.skip, this.skip + this.pageSize)
if (!this.sort) { return pagedData; }
var orderedAndPagedData = orderBy(pagedData, this.sort);
return orderedAndPagedData;
}
Plunkr: http ://plnkr.co/edit/ZtaExNxX9eOQrCzYwO1N?p = preview
而不是使用[data] =“ risks”,請使用[kendodatagrid] =“ risks”
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.