javascript - 检查后表达式发生了变化-angular

Question

当我在(更改)操作方法中调用服务时，出现此错误:

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

我的代码:

onChange(event) { 

  const messageToDisplay = "Message test";
  this.popinService.open(messageToDisplay).subscribe((result: ConfirmPopinResultType) => {
    if (result === ConfirmPopinResultType.CONFIRM) {
      console.log("test");
    }
  });        
}

onChange 是输入 react 表单(选择下拉列表)上的事件处理程序

<form [formGroup]="poolForm"> 
  <select id="pool-select" #item (change)="item.value = onChangePool(item.value)" formControlName="item"> 
     <option *ngFor="let item of items" [value]="item.name">{{ item.name }}</option> 
  </select> 
</form> 

当我在 Change 事件处理程序上调用 poppin 服务时发生异常错误(显示带有两个按钮 Confirm 和 Cancel 的弹出窗口)

感谢您的帮助!

Answer 1

您正在监听 DOM 元素事件。

(change)="onChange(item.value)"

并且您收到了与 Angular 表单相关的错误。

Previous value: 'ng-untouched: true'. Current value: 'ng-untouched: false'

两者有冲突
因为 ngModel 正在跟踪对表单组件的更改。
Angular Forms 使用(ngModelChange) 通知组件更改。
Angular Reactive Forms 使用 valueChanges observables。

您还没有分享附加 (change) 事件处理程序的位置，但它显然位于 ngModel 使用的表单输入中。

您应该使用 (ngModelChange) 而不是 (change)。