JSON 数据无法映射到我导出的接口(interface)？

Question

我无法将我的 Angular HTML 绑定(bind)到我的 devices数组，因为我期望的对象看起来像不匹配。我想绑定(bind)到 device.modelName但它失败了，因为我实际取回的对象具有属性 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只通知编译器，它对实际数据没有任何作用，正如文档中所说:

A type assertion is like a type cast in other languages, but performs no special checking or restructuring of data

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

您需要自己进行转换:

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