来自 Web API 响应的角度日期答案

【问题标题】：Angular Date From Web API Response来自 Web API 响应的角度日期
【发布时间】：2018-03-06 05:57:12
【问题描述】：

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

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

在我的场景中，我的 Web 应用程序从我的 SQL 数据库中获取 Tasks，每个 Task 都包含一个开始和结束 DateTime。我的 TasksController 使用 AutoMapper 将每个 Task 映射到 TaskViewModel 对象，我的 TaskViewModel 有一个类型为 DateTime 的 start 和 finish 属性。

如果我在我的 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 类型？

【问题讨论】：

为什么要检查响应类型是日期？您可以根据需要转换为类型。对吗？
我只是检查类型以帮助我调查为什么使用日期的业务逻辑代码无法理解日期。我的可观察任务数组中的开始和结束属性只是字母和数字字符串，而不是日期，因此我的业务逻辑无法使用它们。
您解决了这个问题吗？我正在经历同样的事情。从 web api 接收的日期对于 getMonth、getFullYear 等具有未定义的值。

标签： angular datetime angular2-observables

【解决方案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

【讨论】：