如何将http响应映射到Angular中的客户端模型类型答案

【问题标题】：How to map http response to client model type in Angular如何将http响应映射到Angular中的客户端模型类型
【发布时间】：2020-01-28 19:30:48
【问题描述】：

我在客户端有这样的模型 MyObejct：

class MyObject{
 id: number;
 name: string;
 active: boolean;
}

而http响应json数据如下：

[
 {
  id: "1",
  name: "object1",
  active: "true",
 }
]

http响应是键值对，值类型都是字符串。那么如何将 http 响应映射到“MyObject”类型。 http get函数是这样的：

getMyObejct(name: string): Observable<MyObject> {
 const url = this.url + 'name/' + name;
 return this.http.get<MyObject>(url);  // This is part I'm confused
}

getAllObjects(): Observable<MyObject[]> {
 return this.http.get<MyObject>(this.url); // How to map this reponse to MyObject
}

http 响应值都是字符串类型，但 MyObject 有 number 和 boolean 类型。我该怎么做？

【问题讨论】：

标签： angular http response

【解决方案1】：

这取决于您是否真的需要 MyObject 的实例，或者只是具有相同属性的东西。

如果你只需要一个具有相同属性的对象，你可以这样做：

return this.http.get<MyObject>(url).map( (obj) => {
  id: Number(obj.id), 
  name: obj.name,
  active: obj.active === 'true'
});

如果你需要一个实际的 MyObject 实例（例如，如果 MyObject 有方法），你可以这样做：

return this.http.get<MyObject>(url).map( (obj) => Object.assign(new MyObject(), {
  id: Number(obj.id), 
  name: obj.name,
  active: obj.active === 'true'
}));

【讨论】：

【解决方案2】：

您可能想查看class-transformer。 plainToClass 方法将普通的 javascript 对象转换为特定类的实例。

import {plainToClass} from "class-transformer";

fetch(url).then((objects: MyObject[]) => {
    const realMyObjects = plainToClass(MyObject, objects);
    // now each object in realMyObjects is an instance of MyObject class
});

在您的情况下，您需要启用隐式类型转换：

class MyPayload {
  prop: string
}

const result1 = plainToClass(MyPayload, { prop: 1234 }, { enableImplicitConversion: true });

/**
 *  result1 will be `{ prop: "1234" }` - notice how the prop value has been 
 *  converted to string.
 */

【讨论】：

【解决方案3】：

要指定响应对象类型，首先定义一个具有所需属性的接口。（使用接口而不是类；响应不能自动转换为类的实例。）

interface MyObject{
 id: number;
 name: string;
 active: boolean;
}

getAllObjects(): Observable<MyObject[]> {
 return this.http.get<MyObject>(this.url); // now returns an Observable of MyObject[]
}

在此处了解更多信息 - https://angular.io/guide/http#typechecking-the-response

【讨论】：