来自 Web API 响应的 Angular 日期

Question

我正在开发一个 Angular (4.1.2) Web 应用程序以及一个相应的 ASP.Net Core (1.1) Web API。

我有一个 Angular 服务，它向我的 Web API 发出数据的 http 请求，并且从 Angular 服务返回的对象中的日期不是类型 Date .

在我的场景中，我的 Web 应用程序正在获取 Tasks来自我的 SQL 数据库和每个 Task包括开始和结束 DateTime .我的 TasksController 使用 AutoMapper 来映射每个 Task到 TaskViewModel对象和我的 TaskViewModel具有类型为 DateTime 的开始和结束属性.

如果我在 TasksController 中放置一个断点并检查 TaskViewModel要返回的对象，在请求之后，开始和结束属性的类型为 DateTime因此，日、月、小时等都很好。

在 Angular 中，我有一个 task-api.service.ts包含以下代码的文件:

public getTasks(): Observable<Task[]> {
    let tasksArray: Observable<Task[]> = this.http.get("/api/tasks").map((response: Response) => {
        return <Task[]>response.json();
    }).catch(this.handleError);

    tasksArray.forEach(item => {
        console.log("Start: " +
            item.map(task => {

                if (task.start instanceof Date) {
                    console.log(task.start + " is date.");
                } else {
                    console.log(task.start + " is not date.");
                }

            }));
    });

    return tasksArray;
}

当我 console.log()它们显示的开始和结束日期 2017-01-01T1 0:00:00 .我测试了日期以检查它们。

我的 Angular Task类定义如下:

export class Task {

private _children: Task[];

get children(): Task[] {
    //console.log("Getting children");
    return this._children;
};
set children(value: Task[]) {
    //console.log("Setting children");
    this._children = value;
};

constructor(
    public id: string,
    public scheduleId: string,
    public description: string,
    public taskTypeId: number,
    public taskType: string,
    public locationId?: number,
    public start?: Date,
    public finish?: Date,
    public duration?: number, // milliseconds
    public parentId?: string,
    public dependentTaskId?: string,
    public label?: string,
    children?: Task[])
    {
        if (children != null)
        {
            this.children = children;
        };
    }
};

如何确保我的 Typescript 对象中的开始和结束日期类型为 Date请？

Answer 1

你试过 dateReviver 吗？

public getTasks(): Observable<Task[]> {
    let tasksArray: Observable<Task[]> = this.http.get("/api/tasks")
                .map((response: Response) => {
                        return <Task[]>JSON.parse(response, dateReviver);
                }).catch(this.handleError);
}

function dateReviver(key, value) {  
    var a;  
    if (typeof value === 'string') {  
        a = /^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2}):(\d{2}(?:\.\d*)?)Z$/.exec(value);  
        if (a) {  
            return new Date(Date.UTC(+a[1], +a[2] - 1, +a[3], +a[4],  
                        +a[5], +a[6]));  
            }  
    }  
   return value;
};

注意:小心使用日期时间类型。 UTC 或本地。

引用:

https://docs.microsoft.com/en-us/scripting/javascript/reference/json-parse-function-javascript

http://james.newtonking.com/archive/2009/04/12/native-json-in-ie8-firefox-3-5-plus-json-net