ExpressionChangedAfterItHasBeenCheckedError Explained

Explique-me por que continuo recebendo este erro: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked.

Obviamente, eu só o obtenho no modo dev, isso não acontece na minha produção, mas é muito chato e simplesmente não entendo os benefícios de ter um erro no meu ambiente dev que não aparece no produto - Provavelmente por causa da minha falta de entendimento.

Normalmente, a correção é fácil, apenas envolvo o erro que causa o código em um setTimeout como este:

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

Ou force a detecção de alterações com um construtor como este constructor(private cd: ChangeDetectorRef) {}:

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

Mas por que constantemente encontro esse erro? Quero entender para evitar essas correções hacky no futuro.

Eu tive uma questão semelhante. Observando a documentação dos ganchos do ciclo de vida , mudei ngAfterViewInitpara ngAfterContentInite funcionou.

Este erro indica um problema real no seu aplicativo, portanto, faz sentido lançar uma exceção.

Na devModedetecção de alterações, é adicionada uma volta adicional após cada execução regular de detecção de alterações para verificar se o modelo foi alterado.

Se o modelo mudou entre o turno regular e o turno adicional de detecção de alterações, isso indica que

• a própria detecção de alterações causou uma mudança
• um método ou método retorna um valor diferente toda vez que é chamado

que são ruins, porque não está claro como proceder, pois o modelo pode nunca se estabilizar.

Se as execuções angulares alterarem a detecção até o modelo estabilizar, ele poderá ser executado para sempre. Se o Angular não executar a detecção de alterações, a visualização poderá não refletir o estado atual do modelo.

Consulte também Qual é a diferença entre o modo de produção e desenvolvimento no Angular2?

Muita compreensão veio depois que eu entendi os Ganchos do Ciclo de Vida Angular e sua relação com a detecção de alterações.

Eu estava tentando fazer com que o Angular atualizasse um sinalizador global vinculado ao *ngIfde um elemento e estava tentando alterar esse sinalizador dentro do ngOnInit()gancho do ciclo de vida de outro componente.

De acordo com a documentação, esse método é chamado depois que o Angular já detectou alterações:

Chamado uma vez, após o primeiro ngOnChanges ().

Portanto, atualizar o sinalizador dentro de ngOnChanges()não iniciará a detecção de alterações. Então, quando a detecção de alterações for acionada novamente, o valor do sinalizador será alterado e o erro será gerado.

No meu caso, mudei isso:

constructor(private globalEventsService: GlobalEventsService) {

}

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

Para isso:

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

ngOnInit() {

}

e resolveu o problema :)

Atualizar

Eu recomendo começar primeiro com a auto-resposta do OP : pense corretamente no que pode ser feito no constructorvs, no que deve ser feito ngOnChanges().

Original

Esta é mais uma observação do que uma resposta, mas pode ajudar alguém. Eu me deparei com esse problema ao tentar fazer a presença de um botão depender do estado do formulário:

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

Até onde eu sei, essa sintaxe leva o botão a ser adicionado e removido do DOM com base na condição. O que por sua vez leva ao ExpressionChangedAfterItHasBeenCheckedError.

A correção no meu caso (embora eu não pretenda entender todas as implicações da diferença), era usar display: none:

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

Havia respostas interessantes, mas não achei uma que atendesse às minhas necessidades, a mais próxima de @ chittrang-mishra, que se refere apenas a uma função específica e não a várias alternâncias, como no meu aplicativo.

Eu não queria usar [hidden]a vantagem de *ngIfnem fazer parte do DOM, então encontrei a solução a seguir, que pode não ser a melhor para todos, pois suprime o erro em vez de corrigi-lo, mas no meu caso, onde eu conheço o resultado final está correto, parece ok para o meu aplicativo.

O que eu fiz foi implementar AfterViewChecked, adicionar constructor(private changeDetector : ChangeDetectorRef ) {}e depois

ngAfterViewChecked(){
  this.changeDetector.detectChanges();
}

Espero que isso ajude outros, como muitos outros me ajudaram.

O Angular executa a detecção de alterações e, quando descobrir que alguns valores que foram passados ​​para o componente filho foram alterados, o Angular lança o erro:

ExpressionChangedAfterItHasBeenCheckedError clique para mais

Para corrigir isso, podemos usar o AfterContentCheckedgancho do ciclo de vida e

import { ChangeDetectorRef, AfterContentChecked} from '@angular/core';

  constructor(
  private cdref: ChangeDetectorRef) { }

  ngAfterContentChecked() {

    this.cdref.detectChanges();

  }

No meu caso, tive esse problema no meu arquivo de especificação, enquanto executava meus testes.

Eu tive que mudar ngIf para [hidden]

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

para

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

Siga os passos abaixo:

1. Use 'ChangeDetectorRef' importando-o de @ angular / core da seguinte maneira:

import{ ChangeDetectorRef } from '@angular/core';

2. Implemente-o no construtor () da seguinte maneira:

constructor(   private cdRef : ChangeDetectorRef  ) {}

3. Adicione à sua função o seguinte método que você está chamando em um evento, como o clique do botão. Então fica assim:

functionName() {   
    yourCode;  
    //add this line to get rid of the error  
    this.cdRef.detectChanges();     
}

Eu estava usando ng2-carouselamos (Angular 8 e Bootstrap 4)

Abaixo corrigi meu problema:

O que eu fiz:

1. implement AfterViewChecked,  
2. add constructor(private changeDetector : ChangeDetectorRef ) {} and then 
3. ngAfterViewChecked(){ this.changeDetector.detectChanges(); }

Eu estava enfrentando o mesmo problema que o valor estava mudando em uma das matrizes no meu componente. Mas, em vez de detectar as alterações na alteração de valor, mudei a estratégia de detecção de alteração de componente para onPush(que detectará alterações na alteração de objeto e não na alteração de valor).

import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';

@Component({
    changeDetection: ChangeDetectionStrategy.OnPush
    selector: -
    ......
})

Referindo-se ao artigo https://blog.angularindepth.com/everything-you-need-to-know-about-the-expressionchangedafterithasbeencheckederror-error-e3fd9ce7dbb4

Portanto, a mecânica por trás da detecção de alterações realmente funciona de maneira que os resumos de detecção e verificação de alterações sejam executados de forma síncrona. Isso significa que, se atualizarmos as propriedades de forma assíncrona, os valores não serão atualizados quando o loop de verificação estiver em execução e não obteremos ExpressionChanged...erros. A razão pela qual obtemos esse erro é que, durante o processo de verificação, o Angular vê valores diferentes dos registrados na fase de detecção de alterações. Então, para evitar isso ....

1) Use changeDetectorRef

2) use setTimeOut. Isso executará seu código em outra VM como uma tarefa macro. A Angular não verá essas alterações durante o processo de verificação e você não receberá esse erro.

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

3) Se você realmente deseja executar seu código na mesma VM, use como

Promise.resolve(null).then(() => this.isLoading = true);

Isso criará uma micro-tarefa. A fila de micro-tarefas é processada após a conclusão do código síncrono atual, portanto, a atualização da propriedade ocorrerá após a etapa de verificação.

@HostBinding pode ser uma fonte confusa desse erro.

Por exemplo, digamos que você tenha a seguinte ligação de host em um componente

// image-carousel.component.ts
@HostBinding('style.background') 
style_groupBG: string;

Para simplificar, digamos que essa propriedade seja atualizada através da seguinte propriedade de entrada:

@Input('carouselConfig')
public set carouselConfig(carouselConfig: string) 
{
    this.style_groupBG = carouselConfig.bgColor;   
}

No componente pai, você o está definindo programaticamente ngAfterViewInit

@ViewChild(ImageCarousel) carousel: ImageCarousel;

ngAfterViewInit()
{
    this.carousel.carouselConfig = { bgColor: 'red' };
}

Aqui está o que acontece:

• Seu componente pai é criado
• O componente ImageCarousel é criado e atribuído a carousel(via ViewChild)
• Não podemos acessar carouselaté ngAfterViewInit()(será nulo)
• Atribuímos a configuração, que define style_groupBG = 'red'
• Isso, por sua vez, define background: redo componente ImageCarousel do host
• Esse componente é 'de propriedade' do seu componente pai; portanto, quando ele verifica alterações, encontra uma alteração carousel.style.backgrounde não é inteligente o suficiente para saber que isso não é um problema, e lança a exceção.

Uma solução é introduzir outro ImageCarousel, um div de wrapper, e definir a cor do plano de fundo, mas você não obtém alguns dos benefícios de usar HostBinding(como permitir que o pai controle os limites completos do objeto).

A melhor solução, no componente pai, é adicionar detectChanges () depois de definir a configuração.

ngAfterViewInit()
{
    this.carousel.carouselConfig = { ... };
    this.cdr.detectChanges();
}

Isso pode parecer bastante óbvio assim, e muito semelhante a outras respostas, mas há uma diferença sutil.

Considere o caso em que você não adiciona @HostBindingaté mais tarde durante o desenvolvimento. De repente, você recebe esse erro e parece não fazer sentido.

Aqui estão os meus pensamentos sobre o que está acontecendo. Não li a documentação, mas tenho certeza de que isso faz parte do motivo pelo qual o erro é mostrado.

*ngIf="isProcessing()" 

Ao usar * ngIf, ele altera fisicamente o DOM adicionando ou removendo o elemento toda vez que a condição é alterada. Portanto, se a condição mudar antes de ser renderizada na visualização (o que é altamente possível no mundo do Angular), o erro será gerado. Veja a explicação aqui entre os modos de desenvolvimento e produção.

[hidden]="isProcessing()"

Ao usá- [hidden]lo, não altera fisicamente o, DOMmas apenas o oculta elementda vista, provavelmente usando CSSna parte de trás. O elemento ainda está lá no DOM, mas não é visível, dependendo do valor da condição. É por isso que o erro não ocorrerá ao usar [hidden].

Para o meu problema, eu estava lendo o github - "ExpressionChangedAfterItHasBeenCheckedError ao alterar o valor 'não modelo' de um componente no afterViewInit" e decidi adicionar o ngModel

<input type="hidden" ngModel #clientName />

Corrigiu o meu problema, espero que ajude alguém.

Dicas de depuração

Este erro pode ser bastante confuso e é fácil fazer uma suposição errada sobre exatamente quando está ocorrendo. Acho útil adicionar muitas instruções de depuração como essa nos componentes afetados nos locais apropriados. Isso ajuda a entender o fluxo.

No pai, coloque instruções como esta (a string exata 'EXPRESSIONCHANGED' é importante), mas, além disso, são apenas exemplos:

    console.log('EXPRESSIONCHANGED - HomePageComponent: constructor');
    console.log('EXPRESSIONCHANGED - HomePageComponent: setting config', newConfig);
    console.log('EXPRESSIONCHANGED - HomePageComponent: setting config ok');
    console.log('EXPRESSIONCHANGED - HomePageComponent: running detectchanges');

Nos retornos de chamada filho / serviços / timer:

    console.log('EXPRESSIONCHANGED - ChildComponent: setting config');
    console.log('EXPRESSIONCHANGED - ChildComponent: setting config ok');

Se você executar detectChangesmanualmente, adicione o log para isso também:

    console.log('EXPRESSIONCHANGED - ChildComponent: running detectchanges');
    this.cdr.detectChanges();

Em seguida, no depurador do Chrome, basta filtrar por 'EXPRESSIONCHANGES'. Isso mostrará exatamente o fluxo e a ordem de tudo o que é definido, e também exatamente em que ponto o Angular lança o erro.

Você também pode clicar nos links cinza para inserir pontos de interrupção.

Outra coisa a se observar se você tiver nomeado propriedades semelhantes em todo o aplicativo (como style.background), verifique se está depurando o que você pensa - configurando-o para um valor de cor obscuro.

No meu caso, eu tinha uma propriedade assíncrona em LoadingService com um BehavioralSubjectisLoading

O uso do modelo [oculto] funciona, mas * ngIf falha

    <h1 [hidden]="!(loaderService.isLoading | async)">
        THIS WORKS FINE
        (Loading Data)
    </h1>

    <h1 *ngIf="!(loaderService.isLoading | async)">
        THIS THROWS ERROR
        (Loading Data)
    </h1>

Uma solução que funcionou para mim usando rxjs

import { startWith, tap, delay } from 'rxjs/operators';

// Data field used to populate on the html
dataSource: any;

....

ngAfterViewInit() {
  this.yourAsyncData.
      .pipe(
          startWith(null),
          delay(0),
          tap((res) => this.dataSource = res)
      ).subscribe();
}

Eu tive esse tipo de erro no Ionic3 (que usa o Angular 4 como parte de sua pilha de tecnologia).

Para mim, estava fazendo isso:

<ion-icon [name]="getFavIconName()"></ion-icon>

Então, eu estava tentando alterar condicionalmente o tipo de ícone de íon de a pinpara a remove-circle, de acordo com o modo em que a tela estava operando.

Acho que vou ter que adicionar um *ngIf.

Meu problema foi manifesto quando adicionei, *ngIfmas essa não foi a causa. O erro foi causado pela alteração do modelo nas {{}}tags e, em seguida, pela tentativa de exibir o modelo alterado na *ngIfinstrução. Aqui está um exemplo:

<div>{{changeMyModelValue()}}</div> <!--don't do this!  or you could get error: ExpressionChangedAfterItHasBeenCheckedError-->
....
<div *ngIf="true">{{myModel.value}}</div>

Para corrigir o problema, mudei de local changeMyModelValue()para onde fazia mais sentido.

Na minha situação, eu queria changeMyModelValue()ligar sempre que um componente filho alterava os dados. Isso exigiu que eu criasse e emitisse um evento no componente filho para que o pai pudesse lidar com ele (chamando changeMyModelValue(). Consulte https://angular.io/guide/component-interaction#parent-listens-for-child-event

Espero que isso ajude alguém vindo aqui: Fazemos chamadas de serviço ngOnInitda seguinte maneira e usamos uma variável displayMainpara controlar a montagem dos elementos no DOM.

component.ts

  displayMain: boolean;
  ngOnInit() {
    this.displayMain = false;
    // Service Calls go here
    // Service Call 1
    // Service Call 2
    // ...
    this.displayMain = true;
  }

e component.html

<div *ngIf="displayMain"> <!-- This is the Root Element -->
 <!-- All the HTML Goes here -->
</div>

Eu recebi esse erro porque estava usando uma variável em component.html que não foi declarada em component.ts. Depois que eu removi a peça em HTML, esse erro se foi.

Eu recebi esse erro porque estava despachando ações de redux no modal e o modal não foi aberto naquele momento. Eu estava despachando ações no momento em que o componente modal recebe entrada. Então, coloquei setTimeout lá para garantir que o modal seja aberto e as ações sejam corrigidas.

Para quem está lutando com isso. Aqui está uma maneira de depurar corretamente esse erro: https://blog.angular-university.io/angular-debugging/

No meu caso, na verdade, me livrei desse erro usando esse hack [oculto] em vez de * ngIf ...

Mas o link que eu forneci me permitiu encontrar THE GUILTY * ngIf :)

Aproveitar.

A solução ... services e rxjs ... emissores de eventos e associação de propriedades usam o rxjs .. é melhor implementá-lo por conta própria, mais controle e mais fácil de depurar. Lembre-se de que os emissores de eventos estão usando rxjs. Simplesmente, crie um serviço e, dentro de um observável, faça com que cada componente assine o observador e passe novo valor ou valor de consumo, conforme necessário