Angular httpClient 将响应映射到具有行为的实体

Posted 2023-03-31

【中文标题】Angular httpClient 将响应映射到具有行为的实体

【英文标题】：Angular httpClient map response to entity with behaviour

【发布时间】：2019-03-20 16:30:07

【问题描述】：

我正在尝试将我的 GET 请求的响应映射到实体类。 在该响应对象上调用函数时会引发错误：

TypeError: res.foo 不是函数

GET-请求：

 this.http.get<TodoEntity>('https://jsonplaceholder.typicode.com/todos/1').subscribe((res) => 
    console.log(res.foo());
  )

实体类：

export class TodoEntity 
 public userId: number;
 public id: number;
 public title: string;
 public completed: boolean;
 public foo(): string 
    return 'Hello world';
 

有没有办法将响应直接映射到实体类并在其上调用函数？还是我必须根据响应对象手动创建 TodoEntity 的新实例？

我正在使用 typescript 3.1.6 和 angular 7.3.6。

【参考方案1】：

您需要创建该类的一个实例。当您将 JSON 转换为原型 javascript/TypeScript 类时，这些方法不可用。

编辑： 刚刚在这里找到了一个很好的解释： https://***.com/a/22875957/894532

【参考方案2】：

您可以使用 RxJS 的 map 运算符从 web 服务返回的一组属性中构建一个 TodoEntity 实例，使用 Object.assign：

this.http.get('https://jsonplaceholder.typicode.com/todos/1').pipe(
  map(res => Object.assign(new TodoEntity(), res))
).subscribe((res: TodoEntity) => 
  console.log(res.foo());
);

演示：https://stackblitz.com/edit/angular-igaw2q