Angular7 + REDUX: Ошибка: "ExpressionChangedAfterItHasBeenCheckedError: Выражение изменилось после того, как оно было проверено

Question

Я проверил все существующие темы здесь и прошел немало дополнительных проблем. Эта проблема мучает меня уже несколько недель, и я не знаю, что делать.

У меня есть архитектура с избыточностью в angular7, и я просто отправляю действия по изменению логического значения в моем магазине избыточности.

В моем app.component.ts я подписываюсь на это «обещание» из хранилища редуксов и, основываясь на его значении, я изменяю локальную переменную, которую привязываю к элементу HTML, с помощью ngClass, например:

В разметке HTML в app.component.html:

<mat-progress-bar class="loadingSpinner" 
[ngClass]="hiddenSpinner" mode="indeterminate"></mat-progress-bar>

В моем контроллере в app.component.ts:

  ngOnInit() {
  this.loadingSubscription = this.isLoading.subscribe(data => {
    if(data == true){this.hiddenSpinner = "" } else { this.hiddenSpinner = "hiddenSpinner"}
    })}

Мое действие Redux:

case START_LOADING: if(INITIAL_STATE.isLoading == false) 
{ return startLoading(state, action) } else { return };

И все же ошибка сохраняется!

Ошибка дает мне знать на 100%, что это из-за этой конкретной переменной.

Ошибка не появляется, если я просто отключаю этот элемент HTML.

Answer 1

ExpressionChangedAfterItHasBeenCheckedError - это очень понятные ожидания, которые означают, что что-то изменилось во время работы циклона детектора изменений (в основном в дочернем компоненте). В вашем случае это hiddenSpinner.

Вариант 1: для решения этой проблемы вы можете использовать setTimeout

 ngOnInit() {
  this.loadingSubscription = this.isLoading.subscribe(data => {
   setTimeout(()=>{

    if(data == true){
        this.hiddenSpinner = "" 
    } else { 
         this.hiddenSpinner = "hiddenSpinner"}
      });
    })}

Вариант 2: Я бы рекомендовал использовать этот подход

 ngOnInit() {
  this.loadingSubscription = this.isLoading.subscribe(data => {
   Promise.resolve(null).then(()=>{

    if(data == true){
        this.hiddenSpinner = "" 
    } else { 
         this.hiddenSpinner = "hiddenSpinner"}
      });
 })}

Примечание: код пишется непосредственно в редакторе stackoverflow, поэтому возможна опечатка или синтаксическая ошибка. Пожалуйста, исправьте себя.