Angular中NgFor遍历对象内数组访问title属性报错求助

问题原因 #

keyvalue管道是用来遍历对象的键值对的，而movieData.results是数组类型，强行使用keyvalue会把数组转换成KeyValue<unknown, unknown>结构（键为数组索引，值为数组元素），此时你访问的item是键值对对象，并非电影数据本身，自然找不到title属性。

解决方案 #

直接移除keyvalue管道，用*ngFor直接遍历数组即可：

修改前的模板代码 #

<div *ngFor="let item of movieData.results | keyvalue">
  {{ item.title }}
</div>

修改后的模板代码 #

<div *ngFor="let item of movieData.results">
  {{ item.title }}
</div>

额外优化（类型安全） #

为了彻底避免类型相关报错，建议在组件中定义电影数据的类型接口：

组件TS代码示例 #

// 定义单个电影数据的接口
interface Movie {
  title: string;
  // 根据API返回数据补充其他属性，比如id、release_date等
}

// 定义API返回的整体数据结构
interface MovieApiResponse {
  results: Movie[];
}

// 组件中声明变量时指定类型
movieData: MovieApiResponse = { results: [] };

// 调用API时指定返回类型
fetchMovies() {
  this.http.get<MovieApiResponse>('你的电影API地址')
    .subscribe(data => {
      this.movieData = data;
    });
}

这样模板中访问item.title时，TypeScript会自动识别属性类型，既不会报错，也能提升代码可读性。

内容的提问来源于stack exchange，提问作者r-r-i