如何在TMDB API中关联电影对象与类型对象的数据

第一步：同步异步请求，确保数据完整加载 #

你当前的两个请求是独立订阅的，可能出现电影数据先返回但类型数据未加载完成的情况，导致无法匹配类型。可以用forkJoin合并两个请求，等待两者都返回后再处理数据：

import { forkJoin } from 'rxjs';

// 替换原有的listTrendingMovies和listGenres调用
loadMovieData() {
  forkJoin([
    this.listMediaService.listTrendingMovies(),
    this.listMediaService.listMovieGenres()
  ]).subscribe(([moviesResponse, genresResponse]) => {
    this.trendingMovies = moviesResponse['results'];
    this.genresList = genresResponse['genres'];
  });
}

在组件初始化时调用loadMovieData()即可。

第二步：优化类型匹配函数 #

你原来的findGenre函数会覆盖组件的genreName变量，遍历多个电影时会导致值被覆盖。改成返回单个类型名称的函数：

getGenreName(genreId: number): string {
  // 使用find替代forEach，找到匹配项后立即返回，提升效率
  const matchedGenre = this.genresList.find(genre => genre.id === genreId);
  return matchedGenre ? matchedGenre.name : '未知类型';
}

第三步：在模板中遍历电影并关联类型 #

每个电影对象的genre_ids属性是类型ID数组，遍历电影的同时，遍历这个数组并调用getGenreName函数：

<div *ngFor="let movie of trendingMovies">
  <h4>{{ movie.title }}</h4>
  <p>
    类型：
    <span *ngFor="let genreId of movie.genre_ids; let isLast = last">
      {{ getGenreName(genreId) }}<span *ngIf="!isLast">, </span>
    </span>
  </p>
  <!-- 可添加其他电影信息，比如海报、评分等 -->
</div>

进阶优化：提前关联类型（推荐） #

如果担心模板中频繁调用函数影响性能，可以在获取数据时就把类型名称直接附加到电影对象上，模板只需直接展示即可：

loadMovieData() {
  forkJoin([
    this.listMediaService.listTrendingMovies(),
    this.listMediaService.listMovieGenres()
  ]).subscribe(([moviesResponse, genresResponse]) => {
    // 将类型数据转为Map，加快查找速度
    const genreMap = new Map(genresResponse['genres'].map(genre => [genre.id, genre.name]));
    
    // 给每个电影添加genreNames属性，存储对应的类型名称数组
    this.trendingMovies = moviesResponse['results'].map(movie => ({
      ...movie,
      genreNames: movie.genre_ids.map(id => genreMap.get(id) || '未知类型')
    }));
  });
}

对应的模板代码更简洁：

<div *ngFor="let movie of trendingMovies">
  <h4>{{ movie.title }}</h4>
  <p>类型：{{ movie.genreNames.join(', ') }}</p>
</div>

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