json - 使用HttpClientModule在Angular 2/4中反序列化json

因此，我从asp.net coreapi获得以下json结构：

{
  "contentType": null,
  "serializerSettings": null,
  "statusCode": null,
  "value": {
     "productName": "Test",
     "shortDescription": "Test 123",
     "imageUri": "https://bla.com/bla",
     "productCode": null,
     "continuationToken": null
  }
}

我有下面的typescript函数，它调用api来获得上述响应：

public externalProduct: ProductVM;


getProductExternal(code: string): Observable<ProductVM> {
    return this.http.get("api/product?productCode=" + code)
        .map((data: ProductVM) => {
            this.externalProduct = data; //not working...
            console.log("DATA: " + data);
            console.log("DATA: " + data['value']);
            return data;
        });
}

ProductVM：

export interface ProductVM {

    productName: string;
    shortDescription: string;
    imageUri: string;
    productCode: string;
    continuationToken: string;
}

我的问题是无法将其反序列化为ProductVM。控制台日志只会产生[object Object]
如何将json响应中value的内容映射到ProductVM对象？
在map函数中说data是ProductVM是错误的吗？我试过很多不同的组合，但我没法成功！
我不确定我是否可以自动告诉angular将json响应中的值数组映射到ProductVM对象，或者我是否应该为ProductVM类（它现在是一个接口）提供构造函数，并手动提取json中的特定值？

最佳答案

链接到http的map方法中的data对象被视为Object类型的对象。此类型没有您需要访问的value成员，因此，类型检查器对此不满意。
类型化的对象（不是any）只能分配给非类型化的对象或完全相同类型的对象。这里，您的数据属于Object类型，不能分配给ProductVM类型的另一个对象。
绕过类型检查的一种解决方案是将数据对象强制转换为any非类型化对象。这将允许访问任何方法或成员，就像普通的旧javascript一样。

getProductExternal(code: string): Observable<ProductVM> {
  return this.http.get("api/product?productCode=" + code)
    .map((data: any) => this.externalProduct = data.value);
}

另一个解决方案是更改api，以便数据可以使用data.json()传递其内容。这样，就不必绕过类型检查，因为json（）方法返回一个非类型化的值。
不过，要小心，因为如果以后再添加any对象，就不会有ProductVM方法。您需要手动创建一个带有new ProductVM()和Object.assign的实例来访问这些方法。