日期时间数据未显示在角度4的Kendo ui网格上

时间:2018-04-13 17:07:25

标签: kendo-ui grid

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  }
];

0 个答案:

没有答案