Angular: пытается получить вложенную заметную для работы - PullRequest
Новая
       7

Angular: пытается получить вложенную заметную для работы

0 голосов
/ 24 апреля 2020

За свою жизнь я не могу разобраться с вложенными наблюдаемыми объектами. Я думаю, что мне, возможно, придется go вернуться к обучающим видео, чтобы получить более глубокое понимание, чем сейчас. Я понимаю все основные понятия c, но соединить их все оказывается трудным.

Пока я пытаюсь заставить работать это приложение c. У меня есть рабочий пример, когда я делаю вызов API и возвращаю массив, который я привязал к интерфейсу. Для каждого члена этого массива мне нужно сделать поиск в другом API, используя значение из интерфейса. Я получу одно значение от того второго API, которое я хочу сохранить в интерфейсе.

Я смоделировал пример того, что я пытаюсь сделать на stackblitz. Любая помощь будет принята с благодарностью.

https://stackblitz.com/edit/call-http-request-in-angular-6-kyq1an?embed=1&file=src / app / app.component.ts

1 Ответ

0 голосов
/ 24 апреля 2020

Надеюсь, это поможет вам. 

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { concatMap, switchMap, take, toArray, map } from 'rxjs/operators';
import { from } from 'rxjs';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'Angular 6';
  constructor(private http: HttpClient) { }

  public url = "https://jsonplaceholder.typicode.com/todos";
  public httpData: IPostWithComments[];

  ngOnInit() {
    this.http.get(this.url)
    .pipe(
      // Reveiced an array of posts
      // Use "from" emit each value one by one
      switchMap((posts: IPost[]) => from(posts)),
      // Take(10) to avoid too many requests
      take(10),
      // For each post, fetch comments associated
      concatMap((post: IPost) => this.http.get(`${this.url}/${post.id}/comments`)
        .pipe(
          // Only take the first five comments
          map((comments: IComment[]) => comments.splice(0, 5))
        ),
        // Use result selector function to add comments in the post object
        (post: IPost, comments: IComment[]) => {
          const postWithComments: IPostWithComments = {...post, comments};
          return postWithComments;
        }
      ),
      // Aggregate all the posts in an array
      toArray()
    )
    .subscribe((postsWithComments: IPostWithComments[]) => {
      console.log(postsWithComments);
      this.httpData = postsWithComments;
    })

  }
}

interface Kafein {
  name:string;
  address:string;
}

interface IPost {
  completed: boolean;
  id: number;
  title: string;
  userId: number;
}

interface IPostWithComments extends IPost {
  comments: IComment[]
}

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

Stackblitz

...