ExpressionChangedAfterItHasBeenCheckedError Explained

Пожалуйста, объясните мне, почему я продолжаю получать эту ошибку: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked.

Очевидно, я получаю это только в режиме разработки, этого не происходит в моей производственной сборке, но это очень раздражает, и я просто не понимаю преимуществ наличия ошибки в моей среде разработки, которая не отображается в продукте - - вероятно, из-за моего непонимания.

Обычно исправить это достаточно просто, я просто помещаю код, вызывающий ошибку, в setTimeout следующим образом:

setTimeout(()=> {
    this.isLoading = true;
}, 0);

Или принудительно обнаружить изменения с помощью такого конструктора constructor(private cd: ChangeDetectorRef) {}:

this.isLoading = true;
this.cd.detectChanges();

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

У меня была аналогичная проблема. Глядя на документацию по хукам жизненного цикла , я переключился ngAfterViewInitна, ngAfterContentInitи это сработало.

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

При devModeобнаружении изменений после каждого обычного запуска обнаружения изменений добавляется дополнительный поворот, чтобы проверить, изменилась ли модель.

Если модель изменилась между обычным и дополнительным ходом обнаружения изменений, это означает, что либо

• само обнаружение изменений вызвало изменение
• метод или геттер возвращает другое значение при каждом вызове

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

Если Angular запускает обнаружение изменений до тех пор, пока модель не стабилизируется, он может работать вечно. Если Angular не запускает обнаружение изменений, представление может не отражать текущее состояние модели.

См. Также В чем разница между производственным режимом и режимом разработки в Angular2?

Большое понимание пришло, когда я понял крючки жизненного цикла Angular и их связь с обнаружением изменений.

Я пытался заставить Angular обновить глобальный флаг, привязанный к *ngIfэлементу, и пытался изменить этот флаг внутри ngOnInit()ловушки жизненного цикла другого компонента.

Согласно документации, этот метод вызывается после того, как Angular уже обнаружил изменения:

Вызывается один раз после первого ngOnChanges ().

Таким образом, обновление флага внутри ngOnChanges()не инициирует обнаружение изменений. Затем, как только обнаружение изменений естественным образом сработает снова, значение флага изменится, и выдается ошибка.

В моем случае я изменил это:

constructor(private globalEventsService: GlobalEventsService) {

}

ngOnInit() {
    this.globalEventsService.showCheckoutHeader = true;
}

К этому:

constructor(private globalEventsService: GlobalEventsService) {
    this.globalEventsService.showCheckoutHeader = true;
}

ngOnInit() {

}

и это устранило проблему :)

Обновить

Я настоятельно рекомендую в первую очередь начать с самоответа ОП : как следует подумайте о том, что можно сделать в constructorсравнении с тем, что следует делать ngOnChanges().

Оригинал

Это скорее побочное примечание, чем ответ, но оно может кому-то помочь. Я наткнулся на эту проблему, когда пытался сделать наличие кнопки зависимой от состояния формы:

<button *ngIf="form.pristine">Yo</button>

Насколько мне известно, этот синтаксис приводит к тому, что кнопка добавляется и удаляется из DOM в зависимости от условия. Что, в свою очередь, приводит к ExpressionChangedAfterItHasBeenCheckedError.

В моем случае исправление (хотя я не утверждаю, что я понимаю все последствия разницы) заключалось в использовании display: noneвместо этого:

<button [style.display]="form.pristine ? 'inline' : 'none'">Yo</button>

Angular запускает обнаружение изменений, и когда обнаруживает, что некоторые значения, которые были переданы дочернему компоненту, были изменены, Angular выдает следующую ошибку:

ExpressionChangedAfterItHasBeenCheckedError нажмите, чтобы узнать больше

Чтобы исправить это, мы можем использовать AfterContentCheckedкрючок жизненного цикла и

import { ChangeDetectorRef, AfterContentChecked} from '@angular/core';

  constructor(
  private cdref: ChangeDetectorRef) { }

  ngAfterContentChecked() {

    this.cdref.detectChanges();

  }

Я использую ng2-carouselamos (Angular 8 и Bootstrap 4)

Эти шаги устранили мою проблему:

1. Осуществлять AfterViewChecked
2. Добавить constructor(private changeDetector : ChangeDetectorRef ) {}
3. затем ngAfterViewChecked(){ this.changeDetector.detectChanges(); }

Были интересные ответы, но я, похоже, не нашел ни одного, соответствующего моим потребностям, ближайшим из которых был @ chittrang-mishra, который относится только к одной конкретной функции, а не к нескольким переключателям, как в моем приложении.

Я не хочу , чтобы использовать [hidden]в своих интересах *ngIfдаже не являясь частью DOM , так что я нашел следующее решение , которое не может быть лучше для всех , как он подавляет ошибку вместо того , чтобы исправить ее, но в моем случае , когда я знаю, окончательный результат правильный, для моего приложения он подходит.

Я реализовал AfterViewChecked, добавил, constructor(private changeDetector : ChangeDetectorRef ) {}а затем

ngAfterViewChecked(){
  this.changeDetector.detectChanges();
}

Я надеюсь, что это поможет другим, как и многие другие помогли мне.

Выполните следующие шаги:

1. Используйте ChangeDetectorRef, импортировав его из @ angular / core следующим образом:

import{ ChangeDetectorRef } from '@angular/core';

2. Реализуйте его в constructor () следующим образом:

constructor(   private cdRef : ChangeDetectorRef  ) {}

3. Добавьте следующий метод к вашей функции, которую вы вызываете при таком событии, как нажатие кнопки. Вот так это выглядит:

functionName() {   
    yourCode;  
    //add this line to get rid of the error  
    this.cdRef.detectChanges();     
}

В моем случае у меня была эта проблема в моем файле спецификации при выполнении моих тестов.

Мне пришлось сменить ngIf на [hidden]

<app-loading *ngIf="isLoading"></app-loading>

к

<app-loading [hidden]="!isLoading"></app-loading>

Я столкнулся с той же проблемой, что и значение в одном из массивов моего компонента. Но вместо того, чтобы обнаруживать изменения при изменении значения, я изменил стратегию обнаружения изменения компонента на onPush(которая будет обнаруживать изменения при изменении объекта, а не при изменении значения).

import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';

@Component({
    changeDetection: ChangeDetectionStrategy.OnPush
    selector: -
    ......
})

Ссылаясь на статью https://blog.angularindepth.com/everything-you-need-to-know-about-the-expressionchangedafterithasbeencheckederror-error-e3fd9ce7dbb4

Таким образом, механизм обнаружения изменений фактически работает таким образом, что и обнаружение изменений, и дайджесты проверки выполняются синхронно. Это означает, что если мы обновляем свойства асинхронно, значения не будут обновляться во время цикла проверки, и мы не получим ExpressionChanged...ошибку. Причина, по которой мы получаем эту ошибку, заключается в том, что во время процесса проверки Angular видит значения, отличные от тех, которые он записал на этапе обнаружения изменений. Чтобы этого избежать ....

1) Используйте changeDetectorRef

2) используйте setTimeOut. Это выполнит ваш код в другой виртуальной машине как макро-задачу. Angular не увидит эти изменения во время процесса проверки, и вы не получите эту ошибку.

 setTimeout(() => {
        this.isLoading = true;
    });

3) Если вы действительно хотите выполнить свой код на той же виртуальной машине, как

Promise.resolve(null).then(() => this.isLoading = true);

Это создаст микрозадачу. Очередь микрозадач обрабатывается после завершения выполнения текущего синхронного кода, поэтому обновление свойства произойдет после этапа проверки.

@HostBinding может быть непонятным источником этой ошибки.

Например, допустим, у вас есть следующая привязка хоста в компоненте

// image-carousel.component.ts
@HostBinding('style.background') 
style_groupBG: string;

Для простоты предположим, что это свойство обновляется через следующее свойство ввода:

@Input('carouselConfig')
public set carouselConfig(carouselConfig: string) 
{
    this.style_groupBG = carouselConfig.bgColor;   
}

В родительском компоненте вы программно устанавливаете его в ngAfterViewInit

@ViewChild(ImageCarousel) carousel: ImageCarousel;

ngAfterViewInit()
{
    this.carousel.carouselConfig = { bgColor: 'red' };
}

Вот что происходит:

• Ваш родительский компонент создан
• Компонент ImageCarousel создается и назначается carousel (через ViewChild)
• Мы не можем получить доступ carousel пока ngAfterViewInit()(он будет нулевым)
• Назначаем конфигурацию, которая устанавливает style_groupBG = 'red'
• Это, в свою очередь, устанавливает background: red компонент ImageCarousel хоста
• Этот компонент «принадлежит» вашему родительскому компоненту, поэтому, когда он проверяет наличие изменений, он находит изменение в carousel.style.background и недостаточно умен, чтобы знать, что это не проблема, поэтому он выдает исключение.

Одно из решений - ввести другую оболочку div insider ImageCarousel и установить для нее цвет фона, но тогда вы не получите некоторых преимуществ использования HostBinding (например, разрешение родителю контролировать полные границы объекта).

Лучшее решение в родительском компоненте - добавить detectChanges () после настройки config.

ngAfterViewInit()
{
    this.carousel.carouselConfig = { ... };
    this.cdr.detectChanges();
}

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

Рассмотрим случай, когда вы добавляете не @HostBindingраньше, чем во время разработки. Внезапно вы получаете эту ошибку, и это кажется бессмысленным.

Вот мои мысли о том, что происходит. Я не читал документацию, но уверен, что это одна из причин появления ошибки.

*ngIf="isProcessing()" 

При использовании * ngIf он физически изменяет DOM, добавляя или удаляя элемент каждый раз, когда изменяется условие. Поэтому, если условие изменится до того, как оно будет отображено в представлении (что очень возможно в мире Angular), выдается ошибка. См. Объяснение здесь между режимами разработки и производства.

[hidden]="isProcessing()"

При использовании [hidden]он не меняет физически, DOMа просто скрывает elementизображение, скорее всего, CSSсзади. Элемент все еще присутствует в модели DOM, но не отображается в зависимости от значения условия. Поэтому при использовании ошибки возникать не будет [hidden].

Пробовал большинство решений, предложенных выше. Только это сработало для меня в этом сценарии. Я использовал * ngIf для переключения неопределенной прогрессивной полосы углового материала на основе вызовов API, и он бросал ExpressionChangedAfterItHasBeenCheckedError.

В рассматриваемом компоненте:

constructor(
    private ngZone: NgZone,
    private changeDetectorRef: ChangeDetectorRef,
) {}

ngOnInit() {
    this.ngZone.runOutsideAngular(() => {
        this.appService.appLoader$.subscribe(value => {
            this.loading = value;
            this.changeDetectorRef.detectChanges();
        });
    });
}

Хитрость заключается в том, чтобы обойти обнаружение изменений углового компонента с помощью ngzone.

PS: Не уверен, что это элегантное решение, но использование ловушки жизненного цикла AfterContentChecked и AfterViewChecked обязательно вызовет проблемы с производительностью, поскольку ваше приложение становится больше, поскольку оно запускается много раз.

Советы по отладке

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

В родительских операторах put (важна точная строка EXPRESSIONCHANGED), но в остальном это всего лишь примеры:

    console.log('EXPRESSIONCHANGED - HomePageComponent: constructor');
    console.log('EXPRESSIONCHANGED - HomePageComponent: setting config', newConfig);
    console.log('EXPRESSIONCHANGED - HomePageComponent: setting config ok');
    console.log('EXPRESSIONCHANGED - HomePageComponent: running detectchanges');

В обратных вызовах child / services / timer:

    console.log('EXPRESSIONCHANGED - ChildComponent: setting config');
    console.log('EXPRESSIONCHANGED - ChildComponent: setting config ok');

Если вы запустите detectChangesвручную, добавьте журналирование и для этого:

    console.log('EXPRESSIONCHANGED - ChildComponent: running detectchanges');
    this.cdr.detectChanges();

Затем в отладчике Chrome просто отфильтруйте «EXPRESSIONCHANGES». Это точно покажет вам поток и порядок всего, что устанавливается, а также точно, в какой момент Angular выдает ошибку.

Вы также можете щелкнуть серые ссылки, чтобы установить точки останова.

Еще одна вещь, на которую следует обратить внимание, если у вас есть свойства с одинаковыми именами во всем приложении (например, style.background), убедитесь, что вы отлаживаете то, что вы думаете о себе, - установив для него значение неясного цвета.

В моем случае у меня было свойство async LoadingServiceс BehavioralSubjectisLoading

Использование модели [hidden] работает, но * ngIf не работает

    <h1 [hidden]="!(loaderService.isLoading | async)">
        THIS WORKS FINE
        (Loading Data)
    </h1>

    <h1 *ngIf="!(loaderService.isLoading | async)">
        THIS THROWS ERROR
        (Loading Data)
    </h1>

Решение, которое сработало для меня с использованием rxjs

import { startWith, tap, delay } from 'rxjs/operators';

// Data field used to populate on the html
dataSource: any;

....

ngAfterViewInit() {
  this.yourAsyncData.
      .pipe(
          startWith(null),
          delay(0),
          tap((res) => this.dataSource = res)
      ).subscribe();
}

У меня была такая ошибка в Ionic3 (который использует Angular 4 как часть своего технологического стека).

Для меня это было так:

<ion-icon [name]="getFavIconName()"></ion-icon>

Итак, я пытался условно изменить тип ионного значка с a pinна a в зависимости от remove-circleрежима, в котором работал экран.

Думаю, мне придется *ngIfвместо этого добавить .

Моя проблема была очевидна, когда я добавил, *ngIfно это не было причиной. Ошибка была вызвана изменением модели в {{}}тегах, а затем попыткой отобразить измененную модель в *ngIfоператоре позже. Вот пример:

<div>{{changeMyModelValue()}}</div> <!--don't do this!  or you could get error: ExpressionChangedAfterItHasBeenCheckedError-->
....
<div *ngIf="true">{{myModel.value}}</div>

Чтобы решить эту проблему, я сменил changeMyModelValue()место звонка на более понятное место.

В моей ситуации я хотел changeMyModelValue()вызывать каждый раз, когда дочерний компонент менял данные. Это потребовало, чтобы я создал и испустил событие в дочернем компоненте, чтобы родитель мог его обработать (путем вызова changeMyModelValue(). См. Https://angular.io/guide/component-interaction#parent-listens-for-child-event

Что касается моей проблемы, я читал github - «ExpressionChangedAfterItHasBeenCheckedError при изменении значения компонента« не модель »в afterViewInit» и решил добавить ngModel

<input type="hidden" ngModel #clientName />

Это устранило мою проблему, надеюсь, это кому-то поможет.

Надеюсь, это поможет кому-то, кто придет сюда: мы ngOnInitвыполняем сервисные вызовы следующим образом и используем переменную displayMainдля управления монтированием элементов в DOM.

component.ts

  displayMain: boolean;
  ngOnInit() {
    this.displayMain = false;
    // Service Calls go here
    // Service Call 1
    // Service Call 2
    // ...
    this.displayMain = true;
  }

и component.html

<div *ngIf="displayMain"> <!-- This is the Root Element -->
 <!-- All the HTML Goes here -->
</div>

Я получил эту ошибку, потому что использовал переменную в component.html, которая не была объявлена ​​в component.ts. Как только я удалил часть в HTML, эта ошибка исчезла.

Я получил эту ошибку, потому что я отправлял действия redux в модальном режиме, а модальный режим не был открыт в то время. Я отправлял действия в тот момент, когда модальный компонент получал ввод. Поэтому я поместил туда setTimeout, чтобы убедиться, что модальное окно открыто, а затем действия совпадают.

Всем, кто борется с этим. Вот способ правильно отладить эту ошибку: https://blog.angular-university.io/angular-debugging/

В моем случае я действительно избавился от этой ошибки с помощью этого [скрытого] хака вместо * ngIf ...

Но предоставленная мной ссылка позволила мне найти ВИНОВНЫХ * ngIf :)

Наслаждаться.

Решение ... службы и rxjs ... эмиттеры событий и привязка свойств используют rxjs .. вам лучше реализовать его самостоятельно, больше контроля, легче отлаживать. Помните, что эмиттеры событий используют rxjs. Просто создайте сервис и внутри наблюдаемого, пусть каждый компонент подписывается на наблюдателя и либо передает новое значение, либо значение cosume по мере необходимости.

Какое-то время я боролся с этой проблемой, в первую очередь при выполнении тестов в своей среде разработки. Мне удалось решить проблему с помощью простого setTimeout для ответа на вызов службы!