如何在Angular中使用NgFor正确展示嵌套数组中的电影分类列表元素

嘿，我看了你的代码，问题出在内层*ngFor的取值方式上啦！

问题分析 #

你在内层循环里写了{{genre[i]}}，但实际上genre已经是movie.genres_list数组中的单个元素了（比如"Drama"、"Action"这类字符串），用索引去访问一个字符串的话，只会取到对应位置的字符（甚至会因为索引超出长度显示undefined），这显然不是你想要的效果。

修正后的代码 #

只需要直接输出genre变量就可以正确显示每个分类：

<div *ngFor="let movie of movies">
  <span>{{movie.movie_title}}</span>
  <!-- 遍历当前电影的分类列表，每个genre就是单个分类名称 -->
  <div *ngFor="let genre of movie.genres_list">
    <h2>{{genre}}</h2>
  </div>
</div>

可选：带索引的展示 #

如果你想给分类加上序号（比如1. Drama、2. Action），可以保留let i=index，但要把索引和genre分开使用：

<div *ngFor="let movie of movies">
  <span>{{movie.movie_title}}</span>
  <div *ngFor="let genre of movie.genres_list; let i=index">
    <h2>{{i + 1}}. {{genre}}</h2>
  </div>
</div>

这样修改后，就能正确展示每部电影对应的所有分类啦！

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