L'erreur ExpressionChangedAfterItHasBeenCheckedError expliquée

Question

Veuillez m'expliquer pourquoi je continue à obtenir cette erreur : ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked.

Évidemment, je ne l'obtiens qu'en mode dev, il ne se produit pas sur ma construction de production, mais c'est très ennuyeux et je ne comprends tout simplement pas les avantages d'avoir une erreur dans mon environnement dev qui n'apparaîtra pas sur prod --probablement en raison de mon manque de compréhension.

En général, la solution est assez simple, il suffit d'envelopper le code qui provoque l'erreur dans un setTimeout comme ceci :

setTimeout(()=> {
    this.isLoading = true;
}, 0);

Ou forcez la détection des changements avec un constructeur comme celui-ci : constructor(private cd: ChangeDetectorRef) {} :

this.isLoading = true;
this.cd.detectChanges();

Mais pourquoi est-ce que je rencontre constamment cette erreur ? Je veux le comprendre afin d'éviter ces corrections improvisées à l'avenir.

Answer 1

J'ai eu un problème similaire. En regardant le documentation sur les crochets du cycle de vie J'ai changé ngAfterViewInit à ngAfterContentInit et ça a marché.

Answer 2

Cette erreur indique un réel problème dans votre application, il est donc logique de lancer une exception.

Sur devMode La détection des changements ajoute un tour supplémentaire après chaque cycle régulier de détection des changements pour vérifier si le modèle a changé.

Si le modèle a changé entre le tour régulier et le tour supplémentaire de détection des changements, cela indique que soit

• la détection du changement elle-même a provoqué un changement
• une méthode ou un getter renvoie une valeur différente à chaque fois qu'il est appelé

qui sont toutes deux mauvaises, car on ne sait pas comment procéder puisque le modèle pourrait ne jamais se stabiliser.

Si Angular exécute la détection des changements jusqu'à ce que le modèle se stabilise, cela peut durer éternellement. Si Angular n'exécute pas la détection des changements, la vue risque de ne pas refléter l'état actuel du modèle.

Voir aussi Quelle est la différence entre le mode production et le mode développement dans Angular2 ?

Answer 3

Beaucoup de compréhension est venue une fois que j'ai compris les crochets du cycle de vie d'Angular et leur relation avec la détection des changements.

J'essayais d'obtenir d'Angular qu'il mette à jour un drapeau global lié à l'adresse de l'utilisateur. *ngIf d'un élément, et j'essayais de changer ce drapeau à l'intérieur de l'élément ngOnInit() le crochet du cycle de vie d'un autre composant.

Selon la documentation, cette méthode est appelée après qu'Angular ait déjà détecté des changements :

Appelé une fois, après le premier ngOnChanges().

Ainsi, la mise à jour du drapeau dans ngOnChanges() ne déclenchera pas la détection des changements. Ensuite, une fois que la détection des modifications a été déclenchée naturellement, la valeur de l'indicateur a changé et l'erreur est levée.

Dans mon cas, j'ai changé cela :

constructor(private globalEventsService: GlobalEventsService) {

}

ngOnInit() {
    this.globalEventsService.showCheckoutHeader = true;
}

A ceci :

constructor(private globalEventsService: GlobalEventsService) {
    this.globalEventsService.showCheckoutHeader = true;
}

ngOnInit() {

}

et cela a réglé le problème :)

Answer 4

Mise à jour

Je recommande vivement de commencer par l'auto-réponse du PO Tout d'abord : réfléchir correctement à ce qui peut être fait dans la constructor par rapport à ce qui devrait être fait dans ngOnChanges() .

Original

Il s'agit plus d'un aparté que d'une réponse, mais cela pourrait aider quelqu'un. Je suis tombé sur ce problème en essayant de faire en sorte que la présence d'un bouton dépende de l'état du formulaire :

<button *ngIf="form.pristine">Yo</button>

Pour autant que je sache, cette syntaxe conduit à ce que le bouton soit ajouté et retiré du DOM en fonction de la condition. Ce qui, à son tour, conduit à la fonction ExpressionChangedAfterItHasBeenCheckedError .

La solution dans mon cas (bien que je ne prétende pas saisir toutes les implications de la différence), était d'utiliser display: none à la place :

<button [style.display]="form.pristine ? 'inline' : 'none'">Yo</button>

Answer 5

Dans mon cas, j'ai eu ce problème dans mon fichier spec, lors de l'exécution de mes tests.

J'ai dû changer ngIf à [hidden]

<app-loading *ngIf="isLoading"></app-loading>

à

<app-loading [hidden]="!isLoading"></app-loading>