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

Question

所以我从我的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
  }
}

我有以下打字稿函数调用 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;
        });    
}

产品虚拟机：

export interface ProductVM {

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

我的问题是我无法将其反序列化为ProductVM. 控制台日志只是产生[object Object]

如何将valuejson 响应中的内容实际映射到ProductVM对象？

在 map 函数中说data是 a是错误的ProductVM吗？我尝试了很多不同的组合，但我无法让它工作！

我不确定我是否可以以某种方式自动告诉angular将json响应中的值数组映射到ProductVM对象，或者是否应该为ProductVM类提供构造函数（它现在是一个接口），并json手动提取特定值？

Answer 1

data链接到 http 的 map 方法中的对象被视为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才能访问这些方法。