Angular, bir ifade değeri değişiklik algılama tamamlandıktan sonra değiştiğinde ExpressionChangedAfterItHasBeenCheckedError hatası fırlatır. Angular bu hatayı yalnızca geliştirme modunda fırlatır.
Geliştirme modunda Angular, her değişiklik algılama çalışmasından sonra bağlamaların değişmediğinden emin olmak için ek bir kontrol yapar. Bu, görünümün tutarsız bir durumda bırakıldığı hataları yakalar. Bu durum örneğin, bir metot veya getter her çağrıldığında farklı bir değer döndürürse ya da bir alt bileşen üst bileşenindeki değerleri değiştirirse meydana gelebilir. Bunlardan herhangi biri gerçekleşirse, bu değişiklik algılamanın kararlı hale gelmediğinin bir işaretidir. Angular, verilerin her zaman görünümde doğru şekilde yansıtılmasını sağlamak için bu hatayı fırlatır; bu da düzensiz kullanıcı arayüzü davranışını veya olası bir sonsuz döngüyü önler.
Bu hata genellikle şablon ifadeleri eklediğinizde veya ngAfterViewInit ya da ngOnChanges gibi yaşam döngüsü kancalarını uygulamaya başladığınızda ortaya çıkar. Ayrıca yükleme durumu ve asenkron işlemlerle veya bir alt bileşenin üst bileşeninin bağlamalarını değiştirmesiyle uğraşırken de yaygındır.
Hatayı ayıklama
CLI tarafından oluşturulan kaynak haritaları hata ayıklama sırasında çok faydalıdır. Hatada gösterilen değerin değiştiği bir şablon ifadesi bulana kadar çağrı yığınında yukarı doğru ilerleyin.
Değişiklik algılama çalıştırıldıktan sonra şablondaki bağlamalarda herhangi bir değişiklik olmadığından emin olun. Bu genellikle kullanım durumunuz için doğru bileşen yaşam döngüsü kancasını kullanmak üzere yeniden düzenleme yapmak anlamına gelir. Sorun ngAfterViewInit içinde mevcutsa, önerilen çözüm başlangıç değerlerini ayarlamak için bir constructor veya ngOnInit kullanmak ya da diğer değer bağlamaları için ngAfterContentInit kullanmaktır.
Görünümdeki metotlara bağlama yapıyorsanız, çağrının şablondaki diğer bağlamaları güncellemediğinden emin olun.
Bu konu hakkında hangi çözümün sizin için doğru olduğunu 'Everything you need to know about the "ExpressionChangedAfterItHasBeenCheckedError" error' makalesinde ve bunun neden yararlı olduğunu 'Angular Debugging "Expression has changed after it was checked": Simple Explanation (and Fix)' makalesinde okuyabilirsiniz.