Angular下拉框绑定ngModelChange无法更新取值问题咨询

• ngModelChange 是 Angular NgModel 指令的专属输出事件，触发前提是当前元素必须绑定了[ngModel]或[(ngModel)]，同时所属模块已导入FormsModule。你原代码里只写了(ngModelChange)、没有绑定ngModel属性，NgModel指令未被激活，因此事件不会触发。
• 就算激活了NgModel，你原有onChange方法的取值逻辑也不兼容：ngModelChange 传递的参数是绑定属性的最新值，不是原生DOM事件对象，你写event.target.value 无法正确取值。

1. 首先在当前组件所属的模块文件中导入FormsModule，并加入@NgModule的imports数组。
2. 在组件类中新增存储选中值的属性：

selectedQty: number = 1;

3. 修改下拉框模板代码，绑定ngModel属性：

<select [ngModel]="selectedQty" (ngModelChange)="onChange($event)">
  <option *ngFor="let quantity of quantities" [ngValue]="quantity">
    {{ quantity }}
  </option>
</select>

4. 调整onChange方法的取值逻辑，直接使用传递过来的数值：

public onChange(quantity: number): void {
  console.log('quantity ' + quantity);
  this.selectedQuantity.emit(quantity);
}

(change)是原生DOM的标准事件，不依赖Angular的表单模块和NgModel指令，触发时传递的是原生事件对象，因此你原有event.target.value的取值逻辑可以正常拿到选中值。需要注意的是原生事件拿到的value是字符串类型，后续涉及数值计算时建议手动转成数字类型避免隐式转换问题。

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