JSON 数据无法映射到我的导出界面？答案

【问题标题】：JSON data fails to map to my exported interface?JSON 数据无法映射到我的导出界面？
【发布时间】：2017-12-02 03:31:54
【问题描述】：

我无法将我的 Angular HTML 绑定到我的 devices 数组，因为我期望的对象看起来不匹配。我想绑定到device.modelName，但它失败了，因为我实际返回的对象具有ModelName 没有camelCase 的属性！

谷歌搜索解决方案我看到我应该使用 type assertion 所以我通过添加 <DeviceStatus[]> 来在我的组件类中生成 <DeviceStatus[]>response.json()); 行。不幸的是，这似乎并没有改变任何东西。

为什么我的 json 对象似乎没有正确映射？

我的模型界面：

export interface DeviceStatus {
    deviceId: string;
    modelName: string;
}

我的组件：

export class FetchDataComponent {
    public devices: Observable<DeviceStatus[]>;

    constructor(http: Http) {
        this.devices =
            http.get('api/Devices')
                .map((response: Response) => <DeviceStatus[]>response.json());

        this.devices.subscribe(x => console.log(x));
    }
}

Chrome 控制台中的结果：

(2) [Object, Object]
  0: Object
    DeviceId: "1"
    ModelName: "Model Name"
...

【问题讨论】：

AFAIK，由于 JavaScript/TypeScript 区分大小写，它不会将“modelName”与“ModelName”匹配。当我之前遇到这个问题时，我将它固定在服务器端。当时我正在使用 ASP.NET，并找到了一个 JSON 格式化程序，我可以在我的 Web API 服务中使用它，将输出更改为驼峰式大小写。
@DeborahK 如果我能得到那个 JSON 格式化程序，那就太好了。我也在服务器上使用 ASP.NET。

标签： json angular typescript serialization

【解决方案1】：

这是使用格式化程序的 ASP.NET 代码：

config.Formatters.JsonFormatter.SerializerSettings.ContractResolver=
  new CamelCasePropertyNamesContractResolver();

它将属性转换为驼峰式大小写，然后在响应中返回它们。

在这篇文章中有一个更完整的例子：Web API 2: how to return JSON with camelCased property names, on objects and their sub-objects

【讨论】：

【解决方案2】：

Type assertion 只通知编译器，它对文档中所说的实际数据没有任何作用：

类型断言类似于其他语言中的类型转换，但执行无需对数据进行特殊检查或重组

永远记住 typescript 中的类型系统不会被翻译成 javascript，所以在运行时你没有那个。

您需要自己进行转换：

this.devices =
    http.get('api/Devices')
        .map((response: Response) => response.json().map(device => ({
             deviceId: device.DeviceId,
             modelName: device.ModelName
        }));

【讨论】：

选择这个作为接受的答案，因为我最初的问题明确提到了类型断言并且没有指定 ASP.NET。任何发现这个正在使用 ASP.NET 的人，@DeborahK 提供了一个出色的解决方案。