Por favor, explique-me porque continuo a receber este erro: `ExpressionChanged AfterItHasBeenCheckedError: A expressão mudou após ter sido verificada.
Obviamente, eu só o entendo no modo dev, isso não'não acontece na minha produção, mas ele'é muito chato e eu simplesmente não'não entendo os benefícios de ter um erro no meu ambiente dev que ganhou'não aparece no prod - provavelmente por causa da minha falta de compreensão.
Normalmente, a correção é fácil o suficiente, eu apenas embrulho o código causador do erro em um setTimeout como este:
setTimeout(()=> {
this.isLoading = true;
}, 0);
Ou forçar a detecção de mudanças com um construtor como este: constructor(cd privado: ChangeDetectorRef) {}
:
this.isLoading = true;
this.cd.detectChanges();
Mas porque é que me deparo constantemente com este erro? Quero compreendê-lo para poder evitar estas reparações hacky no futuro.
Eu tinha um problema semelhante. Olhando para a documentação dos ganchos do ciclo de vida, eu mudei o ngApós-VisualizarInit' para
ngApós-ConteúdoInit' e funcionou.
Este erro indica um problema real na sua aplicação, por isso faz sentido lançar uma excepção.
No devMode
a detecção de mudança adiciona uma volta adicional após cada execução regular de detecção de mudança para verificar se o modelo foi alterado.
Se o modelo mudou entre a curva de detecção de mudança regular e a curva de detecção de mudança adicional, isso indica que
que são ambos maus, porque não é claro como proceder, porque o modelo pode nunca estabilizar.
Se as corridas angulares mudarem de detecção até que o modelo se estabilize, pode ser que funcione para sempre. Se o Angular não executar a detecção de mudança, então a vista pode não refletir o estado atual do modelo.
**Actualização***
Eu recomendo que comece com o OP's self response primeiro: pense bem no que pode ser feito no constructor
vs o que deve ser feito no ngOnChanges()
.
**Original***
Isto é mais uma nota lateral do que uma resposta, mas pode ajudar alguém. Eu tropecei neste problema ao tentar fazer a presença de um botão depender do estado da forma:
<button *ngIf="form.pristine">Yo</button>
Tanto quanto sei, esta sintaxe leva a que o botão seja 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'não pretendo entender todas as implicações da diferença), foi utilizar display: none
em vez disso:
<button [style.display]="form.pristine ? 'inline' : 'none'">Yo</button>