Angular中如何在select的change事件处理器内修改选中项？

问题原因 #

当你给绑定(change)事件后，事件的执行顺序如下： 用户选中某选项，浏览器触发select的change事件 Angular的Forms模块先将选中选项的ngValue同步到selectedFilter变量 执行你绑定的(change)="addFilter()"回调函数 你在回调里同步设置selectedFilter = null，但此时Angular的变更检测还在处理当前事件循环中的DOM更新，这个同步赋值会被后续的绑定逻辑覆盖，导致select无法重置到null选项。 解决方案 # 将selectedFilter = null的操作改为异步执行，让它在当前事件循环的所有绑定更新完成后再执行，最简便的方式是用setTimeout： 修改你的addFilterInternal方法： private addFilterInternal(flt: AvailableFilter): void { // Add filter to active filters this.activeFilters.push(flt); // Remove filter from available filters let idx = this.availableFilters.indexOf(flt); this.availableFilters.splice(idx, 1); // 异步重置选中状态，避开当前事件循环的绑定更新 setTimeout(() => { this.selectedFilter = null; }, 0); } 原理说明 # setTimeout(() => {}, 0)会把重置操作放到下一个宏任务队列，等当前事件循环中Angular完成所有ngModel的同步和DOM更新后，再执行重置操作，此时Angular的变更检测会正确识别到selectedFilter的变化，从而将select的选中状态重置到-- Please select filter --选项。 如果你不想用setTimeout，也可以通过注入NgZone来手动触发变更检测： 先在组件构造函数中注入NgZone： constructor(private zone: NgZone) {} 然后在重置时使用： this.zone.run(() => { this.selectedFilter = null; }); 不过setTimeout的方式更简洁，足够解决这个问题。 内容的提问来源于stack exchange，提问作者marandus