Con fines educativos, estoy tratando de llamar a un servicio que recupera una lista de Publicaciones, y para cada publicación, me gustaría hacer otra llamada a este servicio para obtener la lista de comentarios.
Estoy usando los datos de https://jsonplaceholder.typicode.com/posts
Primero aquí están los modelos que extraje para este servicio:
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; } Y aquí está mi estado actual. Mi objetivo es tener un Observable<Post> con los comments de propiedad correctamente completados.
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) => posts.map((post) => this.http.get<PostComment[]>(`https://jsonplaceholder.typicode.com/posts/${post.id}/comments`).pipe( map((comments) => { post.comments = comments; return post; }) ) ) ) ); } } Pero dice que no puede convertir Observable<Observable<Post>> en Observable<Post[]> . No puedo culparlo, pero no estoy seguro de cómo resolver esto.
Yo intentaría algo como esto:
ngOnInit(): void { const postsUrl = 'https://jsonplaceholder.typicode.com/posts/'; this.posts$ = this.http.get<Post[]>(postsUrl).pipe( map(posts => posts.map(post => this.http.get<PostComment[]>(`${postsUrl}${post.id}/comments`).pipe( map(comments => ({...post, comments})) ) )), switchMap(postObservables => forkJoin(postObservables)) ); }Uno podría forkJoin las solicitudes a los comentarios, actualizar el campo post.comments y devolver la post :
this.posts$ = this.http .get<Post[]>('https://jsonplaceholder.typicode.com/posts/') .pipe( switchMap(posts => forkJoin( posts.map(post => this.http .get<PostComment[]>(`https://jsonplaceholder.typicode.com/posts/${post.id}/comments`) .pipe(map(comments => { post.comments = comments; return post; })) ) ) ) );posts.map((post) => ...es básicamente obtener cada publicación y asignarla a un Observable. Entonces terminas con una matriz de Observables. Lo que quiere hacer es resolver cada Observable en la matriz para obtener el resultado que desea. Si está familiarizado con las promesas, desea el equivalente rxjs de Promise.all, que es esencialmente forkJoin. Consulte esta publicación sobre el comportamiento de Promise.all con RxJS Observables.