angular - 错误：ExpressionChangedAfterItHasBeenCheckedError：以前的值：'ng-untouched: true'。当前值：'ng-untouched: false'

Question

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

第一步：点击文字

第 2 步：关注文本字段

第 3 步：输入 enter 并检查控制台是否存在此错误

错误：ExpressionChangedAfterItHasBeenCheckedError：表达式在检查后已更改。以前的值：'ng-untouched: true'。当前值：'ng-untouched: false'。

标签： angular

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();
  }