Angular - ExpressionChangedAfterItHasBeenCheckedError：检查后表达式已更改

Question

I really can't understand this, I already try search in google, here, everywhere... and i can't understand why this error still showing.

I have something like this:

parent.html

<child-1 [(type)]="type"></child-1>

parent.ts

type = 0;
getTypeToOtherthings() { // function to use in a mouse event, it's not important for that
    console.log(type);
}

child-1.html

<child-2 [(type)]="type">

child-1.ts // this component is like a bridge between the parent and child-2 (maybe the problem is here, i really don't know)

_type: number;
@Input() set type(val: number) {
  this.typeChange.emit(val);
  this._type= val;
}
get type() {
  return this._type;
}
@Output() typeChange: EventEmitter<number> = new EventEmitter<number>();

child-2.html

(some HTML)

child-2.ts

_type: number;
@Input() set type(val: number) {
  this.typeChange.emit(val);
  this._type= val;
}
get type() {
  return this._type;
}
@Output() typeChange: EventEmitter<number> = new EventEmitter<number>();

/*I need change Type variable in childs-2, so i put this in 
onInit (but i already tryed put this in all Afters... , using Promise, ChangeDetectorRef, nothing works,
like everything works fine but the error still)*/
ngOnInit() {
    this.type = 2;
}

after all Im almost giving up

Answer 1

Quick and dirty, but if you see this issue and know the problem line, you can run it in a setTimout, eg

setTimeout(()=> this.markersEventsType = 2;)

But there's probably a more suitable solution. Does it not work to set the eventType in the constructor? If you're getting the change from a service, have you tried using the async pipe?

Answer 2

This indicates a problem in your app. In short, you are modifying the model but not the view. Angular's devMode adds update checks in addition to the ones already existing. Those checks look for any updates in the model, so that the view gets updated.

You are getting this error because none of those checks managed to detect a change in the model. Therefore, one solution would be to use ChangeDetectorRef . Calling detectChanges() tells your app that something changed in the model and that the vue can be updated.

In addition to this answer, I strongly recommend you looking at change detection strategies which in my opinion makes the code more understandable (because it forces you to use ChangeDetection), and in a more general manner, your app will run smoother.