来自 Web API 响应的角度日期

Question

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

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

Tasks在我的场景中，我的 Web 应用程序从 SQL 数据库获取数据，每个应用程序都Task包含 start 和 finish DateTime。我的 TasksController 使用 AutoMapper 将每个任务映射Task到一个TaskViewModel对象，并且我的 TasksControllerTaskViewModel有一个类型为 的 start 和 finish 属性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。我测试了日期来检查它们。

我的 AngularTask类定义如下：

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://learn.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