Angular7-[ngModel]在组件中不更新，在相同的值中键入两次时 最小Stackblitz示例

在Angular 7应用程序中，我创建了一个带有

字段的简单组件

当我用键盘更改输入值时，我希望该值的格式为onBlur-在最简单的示例中，我只想将字符串“EDIT”添加到其中

这基本上是可行的：

• 如果我输入“test”并模糊字段，它将更改为“test EDIT”
• 如果我输入“拉拉”并模糊该字段，它将更改为“拉拉编辑”

但是 当我输入“测试”-模糊（它工作）并再次输入“测试”时，它不再工作了

调用

onInputUpdate（）

-函数（您可以在控制台日志中看到它），变量

inputValue

得到更新（您可以在组件

{{inputValue}}

中看到它），但是输入值没有改变 我希望它是“测试编辑”，但它仍然是“测试”

当我键入另一个字符串时，它可以工作，但是在同一行中键入同一个字符串两次不起作用。为什么呢？我怎样才能解决这个问题

component.html

{{inputValue}} <br />
<input type="text"
       [ngModel]="inputValue"
       (ngModelChange)="onInputUpdate($event)"
       [ngModelOptions]="{ updateOn: 'blur' }"/>

---

要确保在再次键入相同的值后更新输入字段，请通过调用

ChangeDetectorRef.detectChanges

，强制视图首先使用原始文本更新：

public onInputUpdate(inputValue: string) {
  this.inputValue = inputValue;            // Set value to raw input text
  this.changeDetectorRef.detectChanges();  // Trigger change detection
  this.inputValue = inputValue + ' EDIT';
  this.changeDetectorRef.markForCheck();
}

---

请参阅演示。

是否有特定的情况将

updateOn

标志从默认的

change

中移除？尝试创建自己的onFocus来重置它？我只希望更新onBlur的值，这就是为什么我将`[ngModelOptions]=“{updateOn:'blur'}`设置为完美！这正是我希望它的行为方式。谢谢！

public onInputUpdate(inputValue: string) {
  this.inputValue = inputValue;            // Set value to raw input text
  this.changeDetectorRef.detectChanges();  // Trigger change detection
  this.inputValue = inputValue + ' EDIT';
  this.changeDetectorRef.markForCheck();
}