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

Question

我正在进行Angular 9项目，我收到的一个响应包含< code>Date类型的属性，但是当我发送请求时:

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

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

响应正确，但属性被填充为字符串ISO格式（例如：2020-11-24T19:48:20.3637502）（因为在JSON中没有 MyModel的实例或将值赋给 myDateproperty时，始终是 。

除了在收到响应后进行映射之外，还有其他方法可以做到这一点吗？

我试了一下，但没有成功：

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拦截器。

请参阅 Angular 应用程序中的日期处理（第 2 部分 - Angular http 客户端和 ngx 日期选择器）

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

请注意，如果您使用< code >类，而不是< code >类型作为您的数据模型，这就特别棘手。即使您收到的字段是您所期望的，原型链也没有建立，所以对收到的对象的任何方法调用都会导致运行时错误。

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

我的建议是

• 将响应数据建模为类型（或interface）
• 如果需要，通过Observable转换数据。管道
• 如果您需要一个类作为数据模型，请在上一步中将响应映射到一个类