Angular报错Cannot read properties of undefined(reading 'index')

这个错误是两个错误用法共同导致的：

• 你错误将Angular内置的组件生命周期钩子ngOnInit直接绑定给了mat-tab-group的selectedTabChange事件作为回调。Angular在组件初始化阶段会自动无参调用ngOnInit方法，这次调用不会传入任何事件对象，此时方法内的evt形参值为undefined。
• 方法内的API请求是异步逻辑：框架自动调用ngOnInit()时发起请求，等接口响应进入subscribe回调执行到evt.index === 0判断时，会尝试从undefined上读取index属性，直接触发你看到的类型错误。

等后续用户实际切换tab触发事件时，虽然会传入正确的事件对象，但初始化阶段那次框架自动触发的无参调用已经先抛出错误了。

除了初始化报错，这个写法还会导致每次切换tab都会重新执行ngOnInit内的逻辑：重复发起API请求、重复累加this.i的切片计数，完全违背ngOnInit仅在组件初始化时由框架执行一次的设计预期。

不要复用生命周期钩子作为交互事件回调，单独定义事件处理方法即可：

1. 修改模板绑定，指向单独的tab切换方法：

<mat-tab-group mat-align-tabs="start" (selectedTabChange)="onTabChange($event)">

2. 拆分逻辑，生命周期钩子只保留初始化请求逻辑，单独实现tab切换判断：

import { OnInit } from '@angular/core';

// 框架自动调用的初始化生命周期钩子
ngOnInit(): void {
  // 初始化时只执行一次的请求逻辑
  this.api.getApi().subscribe( ({tool, beuty}) => {
    this.beu = beuty.slice(0, this.i += 18);
    this.tools = tool.slice(0, this.i += 18);
  })
}

// 单独处理tab切换事件
onTabChange(evt: any) {
  if (evt.index === 0) { 
    console.log('ddd');
  }
}

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