0
Ich entwickle Angular 2-Anwendung, die KendoUI Datagrid verwendet. Aus irgendeinem Grund kann ich nur das Raster und nicht die Daten sehen. Könnte mir jemand sagen, was ich vermisse?KendoUI Grid nicht auf der Seite
Die Benutzeroberfläche sieht wie folgt aus
Unten ist mein Quellcode
risiko list.Component.ts
import { Component, OnInit } from '@angular/core';
import { Risk } from './risk';
import { RiskService } from './risk.service';
@Component({
moduleId: module.id,
selector: 'rm-risks',
templateUrl: '/app/risk-list.component.html',
providers: [RiskService]
})
export class RiskListComponent implements OnInit {
title = 'Risk List';
risks: Risk[];
constructor(private _riskService: RiskService) {
console.log(this.risks);
}
getRisks(): void {
this._riskService.getRisks().then(risks => this.risks = risks);
}
ngOnInit(): void {
this.getRisks();
}
};
Risiko list.component. html
<kendo-grid [data]="risks">
<kendo-grid-column field="reference">
<template kendoHeaderTemplate let-column let-columnIndex="columnIndex">
{{column.field}}({{columnIndex}})
</template>
</kendo-grid-column>
<kendo-grid-column field="insuredName">
<template kendoHeaderTemplate let-column let-columnIndex="columnIndex">
{{column.field}}({{columnIndex}})
</template>
</kendo-grid-column>
<kendo-grid-column field="inceptionDate">
<template kendoHeaderTemplate let-column let-columnIndex="columnIndex">
{{column.field}}({{columnIndex}})
</template>
</kendo-grid-column>
<kendo-grid-column field="riskType">
<template kendoHeaderTemplate let-column let-columnIndex="columnIndex">
{{column.field}}({{columnIndex}})
</template>
</kendo-grid-column>
<kendo-grid-column field="status">
<template kendoHeaderTemplate let-column let-columnIndex="columnIndex">
{{column.field}}({{columnIndex}})
</template>
</kendo-grid-column>
<kendo-grid-column field="grossPremium">
<template kendoHeaderTemplate let-column let-columnIndex="columnIndex">
{{column.field}}({{columnIndex}})
</template>
</kendo-grid-column>
<kendo-grid-column field="allocatedTo">
<template kendoHeaderTemplate let-column let-columnIndex="columnIndex">
{{column.field}}({{columnIndex}})
</template>
</kendo-grid-column>
<kendo-grid-column field="allocatedCompany">
<template kendoHeaderTemplate let-column let-columnIndex="columnIndex">
{{column.field}}({{columnIndex}})
</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);
}
}
risk.ts
export class Risk {
riskId: number;
reference: string;
insuredName: string;
inceptionDate: string;
riskType: string;
status: string;
grossPremium: number;
allocatedTo: string;
allocatedCompany: string;
}
mock-risk.ts
import { Risk } from './risk'
export const Risks: Risk[] = [
{
"riskId": 1,
"reference": "HISC9308336",
"insuredName": "SA 84161",
"inceptionDate": "March 19, 2016",
"riskType": "Quote",
"status": "Indication",
"grossPremium": 100,
"allocatedTo": "Broker User",
"allocatedCompany": "Broker"
},
{
riskId: 2,
reference: "HISC9308337",
insuredName: "SA 84161",
inceptionDate: 'April 22, 2016',
riskType: 'Quote',
status: 'Indication',
grossPremium: 300,
allocatedTo: 'Broker User',
allocatedCompany: 'Broker'
}
];
risks.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { RiskListComponent } from './risk-list.component';
import { RiskService } from './risk.service';
import { RiskRoutingModule } from './risks-routing.module';
import { GridModule } from '@progress/kendo-angular-grid';
@NgModule({
imports: [
CommonModule,
FormsModule,
RiskRoutingModule,
GridModule
],
declarations: [
RiskListComponent
],
providers: [
RiskService
]
})
export class RisksModule { }
Risiken-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { RiskListComponent } from './risk-list.component';
@NgModule({
imports: [
RouterModule.forChild([
{ path: 'risks', component: RiskListComponent }
])
],
exports: [
RouterModule
]
})
export class RiskRoutingModule { }