Angular中输入框值不随ngModel更新，ngModelChange修改值不生效如何解决？

Angular 中 ngModelChange 是视图值向模型同步过程中触发的事件，该阶段Angular默认会标记当前输入框的视图更新已完成，不会再执行模型到视图的反向同步，避免触发循环变更检测。你在ngModelChange回调中修改绑定的testStr后，Angular不会在本次变更周期中将新值写回输入框，只有下一次输入触发新的变更周期时才会同步，因此出现延迟更新的问题。
你之前调用ChangeDetectorRef无效的原因是，变更检测只会检查组件数据变化，但Angular已跳过该输入框的模型到视图同步逻辑，就算触发全局变更检测也不会更新输入框的值。

推荐按优先级选择以下两种方案，均不需要手动操作DOM：

• 方案1：使用响应式表单实现（Angular官方推荐做法）
  借助FormControl的valueChanges监听输入，更新值时通过emitEvent: false避免循环触发监听事件，可实现实时过滤效果。
  组件代码示例：

  import { FormControl } from '@angular/forms';
  
  testControl = new FormControl('');
  
  ngOnInit() {
    this.testControl.valueChanges.subscribe(inputVal => {
      // 移除所有大小写的a
      const filteredVal = inputVal.replace(/a/gi, '');
      if (filteredVal !== inputVal) {
        this.testControl.setValue(filteredVal, { emitEvent: false });
      }
    })
  }
  

  模板代码示例：

  <input type="text" [formControl]="testControl">
  

• 方案2：将模型修改逻辑放入微任务队列
  如果要继续使用模板驱动表单（ngModel），可以把修改testStr的逻辑放到Promise.resolve().then()中，等待当前变更周期结束后再更新模型，Angular会自动触发新的变更同步到输入框。
  组件代码示例：

  testStr = '';
  
  onModelChange(val: string) {
    Promise.resolve().then(() => {
      this.testStr = val.replace(/a/gi, '');
    })
  }
  

  模板代码示例：

  <input type="text" [ngModel]="testStr" (ngModelChange)="onModelChange($event)">
  

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