如何通过二次请求为Observable<Post>批量填充comments关联数据

错误原因 #

你遇到的类型报错根源在于switchMap操作符的返回值不符合要求：你调用posts.map得到的是一个Observable<Post>类型的数组，而switchMap需要返回Observable对象，此时它会自动把数组转为逐个发射内部Observable的流，最终得到的是Observable<Observable<Post>>类型，和你声明的Observable<Post[]>不匹配。

解决方案 #

使用forkJoin操作符包裹你生成的Observable数组，forkJoin会等待所有内部评论请求完成后，统一返回填充完评论的Post数组，刚好符合你的类型要求。

修复后完整代码 #

import { forkJoin, Observable, catchError, of } from 'rxjs';
import { switchMap, map } from 'rxjs/operators';
import { HttpClient } from '@angular/common/http';
import { OnInit } from '@angular/core';

// 模型定义
export interface Post {
  userId: number;
  id: number;
  title: string;
  body: string;
  comments: PostComment[];
}

export interface PostComment {
  postId: number;
  id: number;
  name: string;
  email: string;
  body: string;
}

export class PostCommentsCombination implements OnInit {
  constructor(private http: HttpClient) {}

  posts$?: Observable<Post[]>;

  ngOnInit(): void {
    this.posts$ = this.http.get<Post[]>('https://jsonplaceholder.typicode.com/posts/').pipe(
      switchMap((posts) => 
        // 用forkJoin合并所有单个Post的评论请求
        forkJoin(
          posts.map((post) =>
            this.http.get<PostComment[]>(`https://jsonplaceholder.typicode.com/posts/${post.id}/comments`).pipe(
              // 可选：处理单个评论请求失败的情况，避免整个流崩溃
              catchError(() => of([] as PostComment[])),
              map((comments) => {
                // 用展开运算符返回新对象，避免修改原始post产生副作用
                return {...post, comments };
              })
            )
          )
        )
      )
    );
  }
}

内容的提问来源于stack exchange，提问作者J4N