Angular：Typescript 将 JSON 响应转换为对象模型不起作用

Posted 2023-03-13

【中文标题】Angular：Typescript 将 JSON 响应转换为对象模型不起作用

【英文标题】：Angular: Typescript casting JSON response as object model not working

【发布时间】：2018-02-11 19:54:12

【问题描述】：

我在尝试将 json 响应投射到对象时遇到问题，我的对象的所有属性都是字符串，这正常吗？

这是我的 ajax 请求：

public getSingle = (keys: any[]): Observable<Badge> => 
        return this._http.get(this.actionUrl + this.getKeysUrl(keys))
            .map((response: Response) => response.json() as Badge )
            .catch(this.handleError);

这是我的徽章模型：

    export interface Badge 
        badgeNumber: number;
        authorizationLevel: number;
        endOfValidity: Date;
    

这是我调用服务功能的地方，我遇到了问题：

this._badgeService.getSingle(this.ids).subscribe(
      (badge: Badge) => 
        console.log(typeof(badge.endOfValidity)); // <-- returning string and not Date
      ,
      error => console.log(error);
      );

【问题讨论】：

as Badge 是一个assertion，它实际上并没有投射任何东西。您需要自己根据 JSON 数据创建一个新的 Badge 对象。

我明白了，你介意告诉我上面的最佳方法吗？

【参考方案1】：

这有点难以解释：

Date 是一个类，这意味着 Date 类型的值需要通过构造函数调用来创建。换句话说，使用new Date(...) 创建一个类实例。

Response.json 方法只会返回一个 JSON 格式的对象，并且不包含任何类的实例，只包含 key:property 的映射。

因此，您需要做的就是手动将 .json() 返回的值转换为 Base 对象。这可以按如下方式完成：

public getSingle = (keys: any[]): Observable<Badge> => 
        return this._http.get(this.actionUrl + this.getKeysUrl(keys))
            .map(r => r.json())
            .map(v => <Badge>
              badgeNumber: v.badgeNumber,
              authorizationLevel: v.authorizationLevel,
              endOfValidity: new Date(v.endOfValidity)
              // preferably this string should be in ISO-8601 format
             )
            //the mapping step can be done in other ways most likely
            .catch(this.handleError);

【讨论】：

我看到问题其实更清楚了。我尝试了您的解决方案并像魅力一样工作，但是当我调用该方法时，有什么方法可以从我的组件中做到这一点吗？因为我的服务类是通用的，所以对象基本上可以是任何东西

如果您仍然想在没有手动映射的情况下从您的服务返回 Observable，那么您需要将 endOfValidity 的类型更改为字符串并在组件中像您一样操作对象。跨度>

嘿@Jota.Toledo 这是什么getKeysUrl？为什么是 2 个网址？我从 1 个 url 检索 json 对象列表，另一个是什么？