Angular выбрасывает ошибку ExpressionChangedAfterItHasBeenCheckedError, когда значение выражения изменяется после
завершения обнаружения изменений. Angular выбрасывает эту ошибку только в режиме разработки.
В режиме разработки Angular выполняет дополнительную проверку после каждого цикла обнаружения изменений, чтобы убедиться, что привязки не изменились. Это позволяет выявить ошибки, при которых представление остается в несогласованном состоянии. Это может произойти, например, если метод или геттер возвращает разное значение при каждом вызове, или если дочерний компонент изменяет значения в своем родителе. Если происходит что-либо из этого, это признак того, что процесс обнаружения изменений не стабилизировался. Angular выбрасывает эту ошибку, чтобы гарантировать корректное отображение данных в представлении, что предотвращает непредсказуемое поведение UI или возможные бесконечные циклы.
Эта ошибка часто возникает при добавлении выражений в шаблон или при реализации хуков жизненного цикла, таких как
ngAfterViewInit или ngOnChanges. Она также часто встречается при работе со статусами загрузки и асинхронными
операциями, или когда дочерний компонент изменяет привязки родителя.
Отладка ошибки
Source maps, генерируемые CLI, очень полезны при отладке. Перемещайтесь вверх по стеку вызовов, пока не найдете выражение в шаблоне, где изменилось значение, указанное в ошибке.
Убедитесь, что после запуска обнаружения изменений в привязках шаблона не происходит никаких изменений. Это часто
означает рефакторинг для использования правильного хука жизненного цикла компонента для вашего случая. Если проблема
возникает в ngAfterViewInit, рекомендуемое решение — использовать конструктор или ngOnInit для установки начальных
значений, либо использовать ngAfterContentInit для других привязок значений.
Если вы используете привязку к методам в представлении, убедитесь, что их вызов не обновляет другие привязки в шаблоне.
Подробнее о том, какое решение подходит именно вам, читайте в статье 'Все, что нужно знать об ошибке "ExpressionChangedAfterItHasBeenCheckedError"', а о пользе этой проверки — в статье 'Отладка Angular "Expression has changed after it was checked": Простое объяснение (и исправление)'.