Angular 4 mat-select异步值绑定异常：选中时属性未定义

看起来你遇到的是Angular变更检测时机和事件触发顺序导致的问题，我来帮你分析下并给出解决方案：

问题根源 #

• 事件触发时机：(change)是原生DOM事件，它会在Angular完成双向绑定更新之前触发，所以此时this.item.name还没被赋值，自然是undefined，控制台显示后续才求值也印证了这一点。
• 模板中的this.冗余：在Angular模板里访问组件类的属性不需要加this.，直接写item.name就可以，虽然这不是导致undefined的直接原因，但属于不规范写法。

解决方案 #

方案1：直接传递选中值到事件函数

不需要依赖双向绑定的变量，而是把选中的subfamily直接作为参数传给onFamilySelected：

<mat-select [(value)]="item.name" (change)="onFamilySelected($event.value)">
  <mat-option *ngFor="let subfamily of subfamilies" [value]="subfamily">
    {{subfamily}}
  </mat-option>
</mat-select>

然后在组件类里修改函数：

onFamilySelected(selectedValue: string) {
  // 这里直接使用selectedValue即可，不需要依赖this.item.name
  console.log(selectedValue);
  this.item.name = selectedValue; // 如果需要同步到item.name的话
}

方案2：改用ngModelChange事件

ngModelChange是Angular提供的事件，它会在双向绑定完成更新之后触发，此时item.name已经被正确赋值：
首先确保你的组件所在模块已经导入了FormsModule（Angular Material项目通常已包含，但如果没加的话需要在模块的imports数组中添加），然后修改模板：

<mat-select [(ngModel)]="item.name" (ngModelChange)="onFamilySelected()">
  <mat-option *ngFor="let subfamily of subfamilies" [value]="subfamily">
    {{subfamily}}
  </mat-option>
</mat-select>

此时在onFamilySelected里访问this.item.name就会得到正确的值了：

onFamilySelected() {
  console.log(this.item.name); // 这里已经有值了
}

额外提示 #

• 确认item在组件初始化时已经被正确初始化（比如在ngOnInit里给this.item赋值一个初始对象：this.item = { name: '' };），避免因为item本身是undefined导致的绑定问题。
• 因为subfamilies是异步加载的，建议给mat-select添加*ngIf="subfamilies"，避免在数据加载完成前渲染空的下拉框，提升用户体验。

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