Angular7 * ngIf в компоненте приложения с isLoading | асинхронный канал из хранилища избыточных значений выдает «ExpressionChangedAfterItHasBeenCheckedError»

Question

У меня есть неопределенный счетчик, который я использую *ngIf в app.component.html (всегда загружен), и он просматривает переменную в моем редукционном магазине, которую я вношу в app.component.ts с @select() isLoading; с помощью | async труба.

Проблема в том, что по какой-то странной причине мое приложение росло, оно вообще перестало работать и просто выдает эту ошибку:

ERROR Error: "ExpressionChangedAfterItHasBeenCheckedError: 
Expression has changed after it was checked. 
Previous value: 'ngIf: [object Object]'. 
Current value: 'ngIf: true'."

Способ, которым я изменяю эту переменную, заключается в том, что в разных местах я внедряю свой сервис уведомлений и просто вызываю notification.loading(). function

Теперь внутри этой функции находится единственное место, где я отправляю действие, чтобы УСТАНОВИТЬ эту переменную в true / false (не переключая его из-за одновременной загрузки нескольких вещей).

Answer 1

В итоге я обошел * ngIf, поэтому я не продолжаю его удалять / добавлять в DOM.

Вместо этого я использовал [ngClass] в html-разметке spinner в app.component.html для привязки к свойству в моем контроллере, там я применил .hiddenSpinner, основываясь на значениях, выдаваемых логическим значением isLoading в хранилище избыточностей :

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

в style.css все, что я сделал, было:

.hiddenSpinner { display: none!important }