【问题标题】:Proper way to pass date objects between a javascript/typescript frontend and a ASP.net Core 5 backend在 javascript/typescript 前端和 ASP.net Core 5 后端之间传递日期对象的正确方法
【发布时间】:2021-12-24 05:46:18
【问题描述】:

我正在开发一个 Web 应用程序,其中后端是用 ASP.net Core 5 编写的 REST Web API,前端是用 TypeScript 编写的 Angular 应用程序。

我的一个 ASP.net 后端 API 返回此 C# 对象的一个​​实例:

public class MyClass
{
  DateTime expires {get; set;}
  string ticket {get; set;}
}

在我的 Angular 应用程序中,我使用 Angular 的 HTTP Client 调用此 API,并将结果反序列化为以下 TypeScript 类的实例:

export class MyClass
{
  expires: Date;
  ticket: string;
}

但是,这不能正常工作,因为如果我在返回 TypeScript 对象后检查它,我可以看到 expires 字段实际上包含 string,而不是 Date 对象。

我想这是因为数据以 JSON 格式在后端和前端之间传输,它不支持类型但只知道字符串和数字,因此 C# DateTime 对象被转换为字符串。

我的问题是:处理这个问题的最佳方法是什么?如果可能的话,我想保持我的对象是强类型的......我可以在 ASP.net 和/或 Angular 端进行一些配置,以便这种序列化自动工作吗?或者如果不是,那么下一个最佳方法是什么?

【问题讨论】:

  • 你在后端NewtonSoftSystem.Text.Json使用哪个json转换器?
  • 它不能自动完成,因为 typescript 类型提示有点假——你不能像在 C# 中那样在运行时反映它们,它们在运行时不存在。所以角度不能知道“过期”实际上是日期(json也没有日期的概念)。您可以做的最好的事情是手动转换,或者在反序列化响应时 - 将所有看起来像日期的字符串转换为日期。
  • 作为 Evk,说 Angular 总是接收一个字符串,你可以使用这样的方法SO
  • @AmirJabari:使用 .NET 5 的默认值,我相信是 System.Text.Json
  • 是的,您必须手动操作,expires 的值应该类似于 2021-11-12T18:52:59.0349748+00:00 您可以像 new Date('2021-11-12T18:52:59.0349748+00:00') 一样使用它。

标签: c# angular typescript asp.net-core datetime


【解决方案1】:

这是我根据 cmets 中建议的答案汇总的解决方案:

return this.http.get<MyClass>(restUrl, { observe: 'response' })
      .pipe(map(response => {
        if (response.ok) {
          response.body.expires = new Date(response.body.expires);
          this.setLoginResult(response.body);
        }
        return response;
      }));

【讨论】:

    猜你喜欢
    • 2016-07-31
    • 2016-03-17
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2023-02-05
    • 2014-10-07
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多