将 HttpClient 的响应映射到对象数组

Posted 2023-03-13

【中文标题】将 HttpClient 的响应映射到对象数组

【英文标题】：Map response from HttpClient to Array of Objects

【发布时间】：2019-09-30 16:55:36

【问题描述】：

使用 Angular 7 我有这个：

export class Envelope<T> 
  result: T[];

  constructor(result: T[]) 
    this.result = result;
  

我将Observable<Envelope<Todo>>（由todoService 返回）映射到Observable<TodoModel[]>：

let models: Observable<TodoModel[]> = this.todoService.get()
  .pipe(
    map((envelope: Envelope<Todo>) => 
      envelope.result.map((todo: Todo) =>  
        return 
          content: todo.content
          // Other properties
        ;
      )));

这可行，但现在信封更改为（result: T 而不是result: T[]）：

export class Envelope<T> 
  result: T;

  constructor(result: T) 
    this.result = result;
  

我需要将Observable<Envelope<Todo[]>> 映射到同一个Observable<TodoModel[]>：

let models: Observable<TodoModel[]> = this.todoService.get()
  .pipe(
    map((envelope: Envelope<Todo[]>) => 
      envelope.result.map((todo: Todo) =>  
        return 
          content: todo.content
          // Other properties
        ;
      )));

我尝试了一些选项，但出现以下错误：

Argument of type 'OperatorFunction<Envelope<Todo[]>,  content: string; []>' 
is not assignable to parameter of type 'OperatorFunction<Envelope<Todo>,  content: string; []>'.

Type 'Envelope<Todo[]>' is not assignable to type 'Envelope<Todo>'.
Type 'Todo[]' is missing the following properties from type 'Response': content.

有人可以告诉我如何进行映射吗？

更新

API 返回例如如下内容：

  "result": [
     "id": 1, "title": "T1", content: "C1" ,
     "id": 2, "title": "T2", content: "C2" 
  ]
 

然后 TodoService 将其作为Observable<Envelope<Todo[]>> 返回，其中Todo 是：

interface Todo 
  id: number;
  title: string;
  content: string;

在组件中，我需要将Observable<Envelope<Todo[]>> 映射到Observable<TodoModel[]>，其中TodoModel 是：

interface TodoModel 
  title: string;
  content: string;

我的应用程序中有更复杂的场景，但基础是这样的。

【问题讨论】：

envelope.result.map 映射一个对象并返回一个映射的对象。它永远不会返回数组。如果您将类型从envelope: Envelope<Todo> 更改为envelope: Envelope<Todo[]>，它不会以任何方式影响输出。它不是运行时代码。

对不起，我不太明白你的回答......请你发布一个代码示例吗？

最好能显示你得到什么数据以及你希望它变成什么样的数据形状

我添加了更新...有帮助吗？

【参考方案1】：

你需要观察信封吗？也许这样的事情会更直接。如果信封包含待办事项列表

result: Observable<TodoModel>; 

    this.todoService.get()
          .subscribe((envelope: any) => 
            this.result = envelope.todo.content;       
          );

【讨论】：

信封还有其他信息，例如与结果本身相关的分页...我不应该包括它吗？