Angular7 * ngIf в компоненте приложения с isLoading | async pipe из redux store выдает ExpressionChangedAfterItHasBeenCheckedError

У меня есть неопределенный счетчик, который я использую *ngIf в app.component.html (всегда загружен), и он смотрит на переменную в моем хранилище redux, которую я привожу в 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()..

Теперь внутри этой функции есть одно место, где я отправляю действие в SET для этой переменной в значение true / false (не переключаю его из-за одновременной загрузки нескольких вещей).


angular angular7 angular-pipe angular-ng-if
person SebastianG    schedule 01.11.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward

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

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

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

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

.hiddenSpinner { display: none!important }
person SebastianG    schedule 05.11.2018