Angular 2 - 剑道 UI 网格。排序实现的问题

Posted 2023-05-07

【中文标题】Angular 2 - 剑道 UI 网格。排序实现的问题

【英文标题】：Angular 2 - Kendo UI grid. Issue with sort implementation

【发布时间】：2017-03-05 04:17:27

【问题描述】：

我正在 Visual Studio 中使用 asp.net 开发一个 Angular 2 应用程序。呈现的 html 使用的是 Kendo UI 数据网格。我正在尝试实现、滚动和排序。滚动效果很好。但是在尝试实现排序时遇到问题。我收到一个错误

错误是“一个对象字面量在严格模式下不能有多个同名的属性。重复的标识符数据”。这是编译时错误

此错误是指 loadRisks() 方法中的数据属性分配。我是打字稿的新手，需要一些帮助。如何将 order by 子句分配给数据网格。有人可以帮忙吗？

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)"
            [sortable]=" mode: 'multiple' "
            [sort]="sort"
            (sortChange)="sortChange($event)">
    <kendo-grid-column field="reference" title="Reference" >
    </kendo-grid-column>
    <kendo-grid-column field="insuredName" title="Insured Name" >
    </kendo-grid-column>
    <kendo-grid-column field="inceptionDate" title="Inception Date" >
    </kendo-grid-column>
    <kendo-grid-column field="riskType" title="Risk Type" >
    </kendo-grid-column>
    <kendo-grid-column field="status" title="Indication" >
    </kendo-grid-column>
    <kendo-grid-column field="grossPremium" title="Gross Premium" >
    </kendo-grid-column>
    <kendo-grid-column field="allocatedTo" title="Allocated To" >
    </kendo-grid-column>
    <kendo-grid-column field="allocatedCompany" title="Allocated Company" >
    </kendo-grid-column>
    <kendo-grid-column field="Discontinued" >
        <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);
    

【问题讨论】：

你能分享完整的错误吗？

错误是“一个对象字面量在严格模式下不能有多个同名的属性。重复的标识符数据”。这是编译时错误

最有可能是由于组件中的可变数据而导致的错误。尝试从这一行重命名数据-private data: any[]

这有什么帮助。如果我重命名，那么它会抱怨以下代码中没有变量数据。如果我创建另一个变量，即 data1 fr 示例，例如以下数据：this.data.slice(this.skip, this.skip + this.pageSize), data1: orderBy(this.risks, this.sort)，那么我得到错误消息类型 'data:any[];data1:Risk[];total:number;' 不可分配给类型 GridDataResult。对象字面量只能指定已知属性，并且 Data1 在 GridDataResult 类型中不存在

【参考方案1】：

该错误意味着您不能像在 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

【讨论】：

我明白这就是原因。我的问题是如何合并该表达式

感谢分享您的实现。我可以看到它在 plunker 上对你有用，但不幸的是它对我不起作用。当我单击排序箭头时，它什么也不做。我认为绑定存在一些问题。不知道是什么问题

我可以看到您正在处理风险和数据对象。您应该考虑只使用一个对象。当 plunkr 证明了这个概念时，你错过了一些明显的东西:-)

我尝试只使用数据对象，但出现错误。我在网格上看不到任何数据。我已更新帖子以包含服务类。你能告诉我问题可能是什么

如果你能在plunkr中重现它，我会看看

【参考方案2】：

而不是使用 [data]="risks" 使用 [kendodatagrid]="risks"