json - 当 HttpClient 映射不会时，如何正确解析 TypeScript 类的 Date 对象？

Question

Task.ts:

export class Task {
    name: string;
    dueDate: Date;
}

tasks.service.ts:

@Injectable()
export class TasksService {

    constructor(private http: HttpClient) { }

    getTasks(): Observable<Task[]> {
        return this.http.get<Task[]>(`${WEBAPI_URL}/Tasks`);
    }
}

我从 getTasks() 返回的 Task 对象分配了它们的 dueDate 字段，但值是 string 而不是我期望的 Date。

一些搜索引导我到 this issue on the Angular github这让我清楚地知道 HttpClient 无意正确解析我的对象。不幸的是，该问题没有提供有用的指导，说明我实际上应该做什么来获取我的 Date 对象。我该怎么办？

Answer 1

这里有几个选项。

1) 您可以在 UI 中将日期作为字符串处理。因此，更改 Task 的定义以将日期保留为字符串并以这种方式使用它，根据需要将其转换为日期以进行计算。

2) 您可以将从 Http 请求返回的每个对象映射到任务对象。像这样:

getTasks(): Observable<Task[]> {
    return this.http.get<Task[]>(`${WEBAPI_URL}/Tasks`)
        .pipe(
            map(items => {
                const tasks: Task[] = [];
                return items.map(
                    item => {
                        item.dueDate = new Date(item.dueDate);
                        return Object.assign(new Task(), item);
                    });
            }),
            tap(data => console.log(JSON.stringify(data))),
            catchError(this.handleError)
        );
}

这还有一个好处，就是在数组中包含实际的任务对象，这意味着如果您添加任务方法或 getter/setter，它们将与您的任务数组正确关联。

编辑:构建一个实用程序类来处理对象的序列化/反序列化可能会更好。那么上面的代码看起来更像这样:

getTasks(): Observable<Task[]> {
    return this.http.get<Task[]>(this.url)
        .pipe(
            map(TaskSerializer.serialize),
            catchError(this.handleError)
        );
}