NgModel 并不总是更新文本输入答案

【问题标题】：NgModel not always updating text inputNgModel 并不总是更新文本输入
【发布时间】：2021-11-05 10:46:45
【问题描述】：

我正在处理一个场景，我希望 ngModel 根据特定条件获取更新

模板：

<mat-form-field>
    <mat-label>val:</mat-label>
    <input matInput [(ngModel)]="someVal" (ngModelChange)="onChange($event)">
</mat-form-field>

组件：

someVal: number = 10;
onChange(val: number):void {
  if(val > 10){
    this.someVal = 0;
  }
}

第一次尝试将值更改为大于 10 的值时，视图会更新。但随后的变化不会。是什么导致了这种行为以及如何解决这个问题？

【问题讨论】：

标签： angular typescript angular-ngmodel angular-ngmodelchange

【解决方案1】：

不要这样做...

[(ngModel)]="someVal" (ngModelChange)="onChange($event)"

这样做...

[ngModel]="someVal" (ngModelChange)="onChange($event)"

onChange(val: number):void {
  if(val > 10) val = 0;
  this.someVal = val;
}

【讨论】：

这没什么区别。第二次尝试后，值仍然不显示0。

【解决方案2】：

添加名称属性。

<input matInput name="val" [(ngModel)]="someVal" (ngModelChange)="onChange($event)">

【讨论】：

【解决方案3】：

作为一种解决方法，我现在这样做了。

private _cdRef: ChangeDetectorRef

public someVal: number = 10;
onChange(val: number):void {
  if(val > 10){
    this.someVal = null;
    this._cdRef.detectChanges();
    this.someVal = 0;
  }
}

【讨论】：