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`);
    }
}

我从Task返回的getTasks()个对象分配了dueDate字段，但值类型为string，而不是Date，就像我期望的那样

有些搜索引导我this issue on the Angular github，这使我明白HttpClient无意正确解析我的对象。不幸的是，这个问题没有为我实际做什么来获取我的Date对象提供有用的指导。我该怎么办？

Answer 1

这里有几种选择。

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

2）您可以将从Http请求返回的每个对象映射到Task对象。像这样：

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

Answer 2

将其声明为组件中的日期，如下所示：

<强> example.component.ts

constructor(private taskService: TaskService) {
}

ngOnInit() {
    this.taskService.getTaksks().subscribe(response => {
        tempValue = response.body;
        tempValue.dueDate = new Date(tempValue.dueDate.format('MM-DD-YYYY');
    });
}

或将其保存为即时

<强> Task.ts

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

我建议做第一种方式。我还建议查看moment.js库

编辑：我会将其声明为Date对象，并将其作为字符串存储在数据库中。这就是我看到大多数用例处理日期的方式，而且我公司的每个人都处理日期的方式。 99％的时间你只想要月/日/年，所以你只会将它存储在数据库中是有道理的，但是将它格式化为ui端的日期对象有点麻烦。

Answer 3

我发现了一个不太重的拦截器，它允许在 Angular 中使用 HTTP 调用时直接更正对象中的 Date。您可以在这里找到它：https://dev.to/imben1109/date-handling-in-angular-application-part-2-angular-http-client-and-ngx-datepicker-3fna

请注意，我唯一需要更改的是正则表达式，以便将末尾的 Z 设为可选，并且我在服务器端使用 DateTimeFormatter.ISO_DATE_TIME 格式。

当HttpClient映射赢了时，如何正确解析TypeScript类的Date对象？

3 个答案: