Angular 7, Ngrx, ExpressionChangedAfterItHasBeenCheckedError
долго искал, но ничего не нашел.
У меня есть такой шаблон:
<learning-navigation *ngIf = "(_navigationSelectedSafe$ | async) == _navigationLayout.location" [(selectMode)] = "_navigationModeSelected"></learning-navigation>
Где:
private _navigationSelected$: Observable<string>;
private _navigationSelectedSafe$ = new EventEmitter<any>(true);
...
this._navigationSelected$.subscribe(res => {
...
this._navigationSelectedSafe$.emit(res)
});
с вводом обучения-навигации, являющимся сеттером:
@Input()
set selectMode(mode: number) {
this.mode = mode;
}
Это вызывает ошибку:
ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'selectMode: null'. Current value: 'selectMode: 1'.
Я уже пытался изменить EventEmitter на BehaviourSubject, принудительно обнаруживатьChanges() после ngInit и ngAfterChecked (хотя это было бы неоптимально, даже если бы это работало), а также обернуть его в контейнер, пытаясь передать режим непосредственно асинхронно в компонент, в то время как просто управляя дисплеем с дополнительным if.
Текущее решение работает, и, похоже, нет никаких побочных эффектов, но оно выдает ошибку независимо от каждого изменения режима. Спасибо
Изменение обнаружения нажатия сработало. Не могли бы вы сформулировать это в хороший ответ? Спасибо.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
<ng-container *ngIf = "_navigationSelectedSafe$ | async as selectedSafe">
<learning-navigation *ngIf = "selectedSafe == _navigationLayout.location"
[(selectMode)] = "_navigationModeSelected"></learning-navigation>
</ng-container>
Это предотвратит отображение элемента learning-navigation frop, когда значение вашего наблюдаемого равно нулю, тем самым стирая вашу ошибку.
РЕДАКТИРОВАТЬ
Используйте тайм-аут в вашем сеттере, чтобы решить любую дальнейшую проблему:
@Input()
set selectMode(mode: number) {
setTimeout(() => this.mode = mode);
}
Вот что я имел в виду, завернув его в контейнер с дополнительным if, я уже пробовал это. Проблема не в нулевом значении, ошибка возникает при каждом изменении, также 1->2, 2->3
Это не решение. это взлом
@Antonis, это действительно обходной путь, но он касается проблемы, которой нет в рабочем режиме.
@ Антонис, и пока это единственный известный мне способ. И поверьте мне, я сталкивался с этим много раз. Если вы знаете лучше, пожалуйста, не стесняйтесь просветить нас.
@Maryannah Вы можете прочитать о стратегиях обнаружения изменений. Они полезны в определенных случаях
@Antonis Я знаю о стратегиях CD, но они полностью ситуативны и не решают напрямую проблему OP, они сосредоточены на стратегии обнаружения изменений компонентов. Вы говорите, что мой ответ - взлом (с чем я согласен), я говорю, что ваше решение излишне и может не подходить для всех, сталкивающихся с одной и той же проблемой. Но рад, что это сработало для OP, и примите мой голос!
Правда это для определенных случаев. Я предлагаю это только тогда, когда мы говорим о презентационных компонентах. Спасибо за голос
Ваша проблема указывает на то, что произошло изменение значения за пределами обнаружения изменений Angular. Это может произойти по нескольким причинам. В вашем случае, я думаю, это асинхронный характер вашего ввода.
Если ваш компонент является презентационным, вы можете установить стратегию обнаружения изменений на onPush.
Таким образом, ваш детектор изменений будет работать только тогда, когда на вашем входе появится новое значение.
пример:
@Component({
selector: 'app-your-comp',
templateUrl: './app-your-comp.component.html',
styleUrls: ['./app-your-comp.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
Я не знаю, какова остальная логика вашего компонента, но если это просто презентационный компонент, вы можете установить
changeDetection: ChangeDetectionStrategy.OnPush. Таким образом, детектор изменений будет вызываться только при обновлении ввода.