检查后表达式发生了变化 - 角度

Posted 2023-02-22

【中文标题】检查后表达式发生了变化 - 角度

【英文标题】：Expression has changed after it was checked - angular

【发布时间】：2019-05-29 12:15:05

【问题描述】：

当我在（更改）操作方法中调用服务时，出现此错误：

错误错误：ExpressionChangedAfterItHasBeenCheckedError：表达式 检查后有变化。以前的值：'ng-untouched: 真的'。当前值：'ng-untouched: false'

我的代码：

onChange(event)  

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

onChange 是输入反应表单上的事件处理程序（选择下拉列表）

<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 服务时发生异常错误（显示带有两个按钮确认和取消的弹出窗口）

感谢您的帮助！

【问题讨论】：

这是 Angular 2+ 中变更检测机制的一个非常常见的问题。你看过this article吗？

这意味着你在 Angular 生命周期的错误时间改变了某些东西的价值。这是一个很好的起点：angular.io/guide/lifecycle-hooks 许多（但不是全部）生命周期问题的解决方案是在分配给新变量的周围放置一个 setTimeout，这样您就可以写foo = bar; 而不是setTimeout( () => foo = bar; , 0);

我已经尝试了所有我找到但仍然无效的解决方案:(，我也使用了 setTimout() 但它不起作用：setTimeout(()=> this.popinService.open(messageToDisplay) .subscribe((result: ConfirmPopinResultType) => if (result === ConfirmPopinResultType.CONFIRM) console.log("test"); ); );

请帮忙！ , 我整天都被屏蔽:(

您是否尝试将 changeDetection: ChangeDetectionStrategy.OnPush 添加到您的组件中

【参考方案1】：

您正在监听 DOM 元素事件。

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

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

之前的值：'ng-untouched: true'。当前值：'ng-untouched: false'

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

您尚未分享您附加 (change) 事件处理程序的位置，但它显然位于 ngModel 也在使用的表单输入上。

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

【讨论】：

是的，更改事件处理程序在表单输入上，我尝试过 (ngModelChange) 而不是 (change) 但我有同样的问题:(，这是我的模板：

我补充说，当我在 Change 事件处理程序上调用此服务时会出现问题： this.popinService.open(messageToDisplay).subscribe((result: ConfirmPopinResultType) => if (result === ConfirmPopinResultType .CONFIRM) console.log("test"); );