Angular使用route参数跳转电影详情页时video标签失效报错问题

你遇到的报错TypeError: Cannot read properties of undefined (reading 'id')翻译为：类型错误：无法读取未定义对象的属性（读取 'id'）

问题根源 #

• 路由参数配置异常：首先检查你的路由配置中，详情页路由路径是否正确声明了参数名为id，比如路径应为movie/:id，如果参数名写错（比如写成:movieId），params['id']就会返回undefined，如果你后续逻辑有读取该返回值的id属性就会触发对应报错。
• 数据异步加载时序问题：你在模板中直接使用movies[movieId].movieUrl时，存在两个时序差问题：
  • 详情组件初始化渲染时，movieId还没通过params回调拿到有效值
  • 详情组件中的movies数组还没从mainService中加载完成，此时movies[movieId]为undefined，读取movieUrl也会触发同类属性读取报错
• 参数类型不匹配：路由params中拿到的id默认是字符串类型，如果你的movies是下标为数字的数组，直接用字符串作为下标索引可能出现取值异常。

修复步骤 #

第一步：修正路由参数获取与数据加载逻辑 #

确认路由配置的参数名为id，同时将拿到的参数转为数字类型，拿到id后再加载电影列表数据：

movieId: number | undefined;
movies: any[] = []; // 声明movies变量存储电影列表

constructor(private mainService:MainService, private route:ActivatedRoute) {}

ngOnInit() {
  this.route.params.subscribe(params => { 
    this.movieId = Number(params['id']); 
    // 替换为你service中获取电影列表的实际调用方法
    this.movies = this.mainService.getMovies();
  });
}

第二步：优化模板避免空值报错 #

使用Angular可选链运算符规避未定义值的报错，同时改用属性绑定替代插值写法更规范：

<div>
  <video controls>
    <source [src]="movies?.[movieId]?.movieUrl" type="video/mp4">
  </video>
</div>

如果需要更稳妥的渲染控制，也可以加判断条件只有数据加载完成后才渲染video标签：

<div>
  <video controls *ngIf="movies.length && movieId !== undefined">
    <source [src]="movies[movieId].movieUrl" type="video/mp4">
  </video>
</div>

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