[英]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.