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

Question

我在客户端有这样的模型 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响应值都是string类型，而MyObject有number和boolean类型。我该怎么做？

Answer 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'
}));

Answer 2

您可能需要查看 class-transformer。 plainToClass 方法将普通 javascript 对象转换为特定 class.

的实例

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.
 */

Answer 3

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

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

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

How to map http response to client model type in Angular

http

response

angular