Angular7 - [ngModel] не обновляется в компоненте, если дважды ввести одно и то же значение

Question

Пример минимального Stackblitz

https://stackblitz.com/edit/angular-mqqvz1

В приложении Angular 7 я создал простой компонент с полем <input>.

Когда я изменяю значение ввода с клавиатуры, я хочу, чтобы значение было отформатировано onBlur . - В минимальном примере я просто хочу добавить строку "РЕДАКТИРОВАТЬ" к нему.

Это в основном работает:

• Если я введу «test» и размыт поле, оно будет изменено на «test EDIT»
• Если я наберу "lala" и размываю поле, оно будет изменено на "lala EDIT"

Однако Когда я набираю «test» - blur (работает) и снова набираю «test», он больше не работает!

Вызывается функция onInputUpdate() (Вы можете увидеть это в журнале консоли), обновляется переменная inputValue (Вы можете видеть это в компоненте {{inputValue}}), Однако входное значение не меняется! Я ожидаю, что это будет «тест EDIT», однако он останется «тест».

Когда я набираю другую строку, это работает, однако ввод в одну и ту же строку 2 раза подряд не работает. Это почему? Как я могу это исправить?

component.html

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

component.ts

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AppComponent {

  inputValue = "teststring";

  constructor(
    private changeDetectorRef: ChangeDetectorRef,
  ) {}

  public ngOnInit() {
    this.inputValue = "initial";
  }

  public onInputUpdate(inputValue: string) {
    this.inputValue = inputValue + ' EDIT';
    this.changeDetectorRef.markForCheck();
    console.log('onInputUpdate new inputValue', this.inputValue)
  }
}

Answer 1

Чтобы убедиться, что поле ввода обновляется после повторного ввода того же значения, принудительно обновите представление сначала с необработанным текстом, вызвав 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();
}

См. этот стек для демонстрации.