angular - 在 Angular 9 中如何在 http 客户端响应模型中强制属性日期类型？

Question

我正在处理 Angular 9 项目，我收到的其中一个响应包含 Date 类型的属性，但是当我发送请求时:

// MyModel
class MyModel {
   prop: string;
   myDate: Date;
}

// request sent like
this.http.get<MyModel>(url);

响应正确，但属性填充为 string ISO 格式(例如:2020-11-24T19:48:20.3637502)(因为在 JSON 中没有输入 Date)。我需要的是，每当我创建 MyModel 的实例或将值分配给 myDate 属性时，它始终是一个 Date。

除了在收到响应后执行 map 之外，还有其他方法吗？

我试过了但是没用:

class MyModel {
   prop: string;
   private _myDate: Date;
   public get myDate() {
      return this._myDate;
   };
   public set myDate(val) {
      this._myDate = new Date(val);
   };
}

Answer 1

最简单的方法是将返回的数据进行映射，然后手动修改。

this.httpClient.get<DataModel>("/api/getData")
  .pipe(
    map((data)=>{
      data.date1 = new Date(data.date1);
      data.date2 = new Date(data.date2);
      data.date3 = new Date(data.date3);
      return data;
    })
  );

请注意，我有点作弊 - Date 构造函数可以将字符串和 Date 作为参数。通常，映射步骤的结果可以与接收到的响应具有不同的类型。

或者，您可以使用 Http 拦截器。

参见 Date Handling in Angular Application (Part 2 - Angular Http Client and Ngx Datepicker)

此外，正如您所注意到的，您为 http get 指定的类型不会以任何方式强制执行。您收到 json 反序列化的结果。

请注意，如果您使用 class，这将特别棘手。 , 不是 type作为你的数据模型。即使您收到的字段是您所期望的，原型(prototype)链也没有建立，因此对接收到的对象的任何方法调用都会导致运行时错误。

这也解释了为什么您尝试使用 get和 set失败 - 您收到的对象不是 MyModel 的实例类。

我的建议是

• 将响应数据建模为 type (或 interface )
• 如果需要，通过 Observable.pipe 转换数据
• 如果您需要一个类作为数据模型，请将响应映射到上一步中的一个类。