Angular mat-select selectionChange事件报无法读取undefined的value属性错误

mat-select的selectionChange事件抛出的不是原生DOM change事件对象，不存在target属性，因此访问event.target.value时会得到undefined，最终触发「Cannot read properties of undefined (reading 'value')」错误。
该事件实际输出的是MatSelectChange类型的实例对象，当前选中的选项值直接挂载在对象的value属性上，不需要通过target层级获取。你当前模板中的事件绑定写法没有问题，错误完全出在TS侧的取值逻辑。

直接修改事件处理函数中的取值逻辑，将event.target.value替换为event.value即可：

/**
 * Function for set the year in actual years dropdown
 */
setActualYear(event: MatSelectChange): void {
  // 直接读取事件对象上的value属性
  this.year = this.navService.year = parseInt(event.value, 10);
  localStorage.setItem('setYearForUserNavigation', `${this.year}`);
  this.navService.sendNavEventUpdate('yearChanged');
}

如果需要TS类型校验，在组件文件顶部导入对应类型即可，不用再把event声明为any：

import { MatSelectChange } from '@angular/material/select';

补充提示：如果你navService.actualYearsDropdown里存的年份本身就是number类型，可以去掉parseInt转换，直接使用event.value赋值即可，只有当绑定的选项值是字符串格式的数字时才需要做类型转换。

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