Question

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

谷歌搜索解决方案我看到我应该使用类型断言所以我做了添加<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"
...

Answer 1

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

类型断言就像是其他语言的类型转换，但执行没有特别检查或重组数据

永远记住，打字稿中的类型系统没有被转换为javascript，所以在运行时你没有那个。

你需要自己做转换：

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

Answer 2

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

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

在将属性转换为响应之前，它会将属性转换为驼峰大小写。

您可以在此处找到更多相关信息：http://www.newtonsoft.com/json/help/html/T_Newtonsoft_Json_Serialization_CamelCasePropertyNamesContractResolver.htm

此帖子中有一个更完整的示例：Web API 2: how to return JSON with camelCased property names, on objects and their sub-objects

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

2 个答案: