0
私はKendoUI DataGridを使用しているAngular 2アプリケーションを開発中です。何らかの理由で、私はデータではなくグリッドを見ることしかできません。誰かが私に何が欠けているかも教えてもらえますか？次のようにKendoUIグリッドがページに表示されない
UIが見え
以下
は、私のソースコード
リスク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();
}
};
リスク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;
}
モック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 { }
リスク-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 { }