angular和kendo-ui都是新手 下面是代码,除了startTime和endTime之外的所有数据都没有显示在Kendo-ui Grid上。使用Angular 5,Kendo-ui和ASP.Net Core 2,EF Core。 以下是HTML,ts和示例数据
dailyMachineNotes.component.html
<div>
<kendo-grid [kendoGridBinding]="breakDownData"
[filterable]="true"
scrollable="true">
<kendo-grid-column *ngFor="let column of columns"
field="{{column.field}}"
title="{{column.title}}"
format="{{column.format}}"
filter="{{column.type}}">
</kendo-grid-column>
</kendo-grid>
</div>
dailyMachineNotes.component.ts
export class dailyMachineNotes{
public breakDownData: BreakDownDataModel[];
baseURL: string;
public columns: ColumnSetting[] = [
{ field: 'machineId', title: 'Machine Id',type: 'text'},
{ field: 'breakDownType', title: 'break Down Type', type: 'text' },
{ field: 'notes',title: 'Notes',type: 'text' },
{ field: 'startTime', format: '{0:yyyy-MM-dd HH:mm}',
title: 'Start Time', type: 'date' },
{ field: 'endTime',format: '{0:yyyy-MM-dd HH:mm}',
title: 'End Time',type: 'date' } ];
constructor(http: Http, @Inject('BASE_URL') baseUrl: string) {
this.http.get(baseUrl + 'dailyMachineNotes/GetdailyMachineNotes').subscribe(result => {
this.breakDownData = result.json() as BreakDownDataModel[];
}, error => console.error(error));
}
}
interface ColumnSetting {
field: string;
title: string;
format?: string;
type: 'text' | 'numeric' | 'boolean' | 'date';
}
BreakDownDataModel.ts
export const BreakDownDataModel= [
{ "machineId": 1, "breakDownType": "Change1",
"notes": test1, "startTime": 2018-04-13 09:05:00.000,
"endTime": 2018-04-13 09:45:00.000 },
{ "machineId": 2, "breakDownType": "Change2",
"notes": test2, "startTime": 2018-04-11 08:40:00.000,
"endTime": 2018-04-11 09:15:00.000 }
];