Отображение контента на основе идентификаторов, хранящихся в localstorage (запрос API)

Question

Я врезался в стену, пытаясь создать функцию, которая, как мне кажется, сделала меня тупее. Я сделал клон imdb с помощью API-интерфейса tmdb, и теперь я хотел бы создать функцию, в которой вы можете добавлять свои избранные в список. В настоящее время мне удалось добавить / удалить mov ie в массиве (в основном идентификатор хранится в массиве), а также он хранится в локальном хранилище. У меня есть эта функция в компоненте, где вы можете найти фильмы:

  toggleFavoriteBtn(id: number) {
    let clickedMovie = this.movies$.find(movie => movie.id === id);
    if (clickedMovie.favourite) {
      // unfavourite
      this.favoritesArray = this.favoritesArray.filter(fave => fave !== id);
    } else {
      this.favoritesArray.push(id);
    }
    clickedMovie.favourite = !clickedMovie.favourite;
    localStorage.setItem("favorites", JSON.stringify(this.favoritesArray));
  }
}

movies $ (movies $: Movie [];) в значительной степени модель (превращена в массив), которая помогает мне вытащить API, как вы видите, я сделал запросы API в моем сервисе следующим образом:

  getMovieDetails(id: number) {
    return this._http.get<Movie[]>(`${this.movieDetailURL}/${id}`, {
      params: {
        api_key: API_KEY,
        append_to_response: "release_date,images,similar,credits"
      }
    });
  }

Итак, что я хотел бы сделать сейчас, так это иметь возможность отображать любимые фильмы в другом компоненте с с помощью функции getMovieDetails, но я просто не могу понять, как это сделать. Я думаю, что посмотрел слишком много уроков и в итоге очень растерялся ... Вот что у меня получилось:

export class FavoritesListComponent implements OnInit {
  favouriteMovies: Movie[];
  results = [];
  constructor(private dataService: DataService) {}

  ngOnInit(): void {
    // get the favourites[] from localStorage
    if (localStorage.getItem("favorites") === null) {
      this.favouriteMovies = [];
    } else {
      this.favouriteMovies = JSON.parse(localStorage.getItem("favorites"));
    }
    this.favouriteMovies.forEach(
      movie => {
        // const movie = this.dataService.getMovieDetails(id);
        // this.results = this.favouriteMovies.push(movie);
        this.dataService.getMovieDetails(movie.id);
      }
      // .subscribe(movie => this.favouriteMovies.push(movie))
    );
  }

Answer 1

Вы можете воспользоваться комбинацией наблюдаемых, используя forkJoin или combineLatest, или вы можете сделать это, используя простые for l oop.

Я покажу вам простые for l oop. Вместо forEach сделайте это. Вы также можете сделать это, используя forEach, я просто предпочитаю for l oop.

for (let i = 0; i < favouriteMovies.length; i++) {
  this.dataService.getMovieDetails(favouriteMovies[i].id).subscribe(movieDetails => {
    console.log(movieDetails);
  });
}

Если вы хотите, чтобы я показал вам forkJoin или combineLatest, как я могу, как хорошо, но этого должно быть достаточно, чтобы разблокировать тебя.