Angular项目报Cannot read property 'genre' of undefined如何修复

问题根本原因 #

你遇到的报错本质是异步请求执行顺序问题：

• Angular的HTTP请求返回的是RxJS Observable，调用subscribe后请求是异步执行的，不会阻塞后续代码运行
• 你在ngOnInit里先调用getMovie()再调用getSimilarMovies()时，getMovie的接口请求还没返回，subscribe里给this.movie赋值的逻辑还没执行，所以getSimilarMovies读取this.movie时自然是未定义状态

修复方案 #

方案1：将相似电影请求放到电影详情请求的回调中（最易理解） #

修改getMovie方法，在接口返回、this.movie赋值完成后再调用getSimilarMovies，同时调整ngOnInit里的调用逻辑：

ngOnInit(): void
{
    this.getMovie();
    // 移除此处的getSimilarMovies调用
}

getMovie(): any
{
    const id = Number(this.route.snapshot.paramMap.get('id'));
    this.httpService.viewDetails(id).subscribe(movie => {
      this.movie = movie;
      // 赋值完成后再调用获取相似电影的方法
      this.getSimilarMovies();
    });
}

方案2：用RxJS操作符串联请求（更符合响应式编程规范） #

如果不想嵌套回调，可以用switchMap操作符把两个请求串联起来，代码更易维护：
首先导入switchMap依赖：

import { switchMap } from 'rxjs';

然后修改业务代码：

ngOnInit(): void {
  const id = Number(this.route.snapshot.paramMap.get('id'));
  this.httpService.viewDetails(id)
    .pipe(
      // 第一个请求返回后，拿到movie数据再发起第二个请求
      switchMap(movie => {
        this.movie = movie;
        return this.httpService.getMoviesByGenre(movie.genre_ids[0]);
      })
    )
    .subscribe(movies => {
      this.similarMovies = movies.results;
    });
}

额外兜底优化 #

可以给getSimilarMovies加一层非空判断，避免其他场景下的空值报错：

getSimilarMovies(): void
{
    // 加可选链和非空判断，movie不存在时直接返回
    const genre = this.movie?.genre_ids?.[0];
    if (!genre) return;
    this.httpService.getMoviesByGenre(genre).subscribe(movies => this.similarMovies = movies.results);
}

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