angular - 错误 : ExpressionChangedAfterItHasBeenCheckedError: Previous value: 'ng-untouched: true' . 当前值: 'ng-untouched: false'

Question

我已在 StackBlitz 上重现了该问题用最少的代码。

第一步:点击文字

第 2 步:专注于文本字段

第 3 步:输入 Enter 并检查控制台是否有此错误

Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'ng-untouched: true'. Current value: 'ng-untouched: false'.

Answer 1

您必须使用 detectChanges() 在指令中手动触发更改检测。 ChangeDetectorRef的方法

修改 editable-on-enter-inplace.directive.ts像这样:
import { Directive,HostListener ,ChangeDetectorRef} from '@angular/core';

 constructor(private editable: EditableInplaceComponent,private cdr: ChangeDetectorRef) { }

  @HostListener('keyup.enter')
  onEnter() {
    this.editable.toViewMode();
    this.cdr.detectChanges();
  }