Angular 16电影应用中TS2339类型错误的原因与解决

问题原因 #

你犯了两个核心错误：

• 类型声明错误：getMovieDetails是获取单部电影详情的接口，却错误声明返回Observable<MovieResponse>类型——MovieResponse是列表接口的返回结构（包含results: Movie[]数组），本身没有original_title字段，这个字段属于单个Movie对象。
• 组件变量类型误用：组件中将接口返回值赋值给MovieResponse类型变量，模板却试图访问仅存在于Movie类型的original_title属性，TypeScript因此抛出属性不存在的错误。

可靠修复步骤 #

1. 修正服务层的返回类型 #

打开app\services\movie-service.service.ts，修改getMovieDetails的返回类型为Observable<Movie>：

// 修正前
getMovieDetails(id: number): Observable<MovieResponse> {
  return this.http.get<MovieResponse>(`${this.apiUrl}/movie/${id}`, { headers: this.headers });
}

// 修正后
getMovieDetails(id: number): Observable<Movie> {
  return this.http.get<Movie>(`${this.apiUrl}/movie/${id}`, { headers: this.headers });
}

2. 调整组件变量类型 #

打开app\components\movie-details\movie-details.component.ts，将变量类型从MovieResponse改为Movie：

// 修正前
movieResponse: MovieResponse | undefined;

// 修正后
movie: Movie | undefined;

同时更新订阅逻辑的赋值语句：

this.movieService.getMovieDetails(movieId).subscribe(data => {
  this.movie = data;
});

3. 更新模板访问路径 #

修改组件模板，将movieResponse?.original_title改为movie?.original_title：

<!-- 修正前 -->
<p>{{ movieResponse?.original_title }}</p>

<!-- 修正后 -->
<p>{{ movie?.original_title }}</p>

可选验证 #

若不确定TMDB接口返回结构，可在订阅中打印返回值确认：

this.movieService.getMovieDetails(movieId).subscribe(data => {
  console.log(data); // 确认返回的是单个电影对象而非列表结构
  this.movie = data;
});

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