ExpressionChangedAfterItHasBeenCheckedError Пояснено

Будь ласка, поясніть мені, чому я продовжую отримувати цю помилку: 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зміні виявлення додає додатковий поворот після кожного регулярного запуску виявлення змін , щоб перевірити , якщо модель змінилася.

Якщо модель змінилася між звичайною та додатковою чергою виявлення змін, це вказує і на те, що

• саме виявлення змін спричинило зміни
• метод або getter повертає інше значення кожного разу, коли воно викликається

які обоє погані, оскільки не зрозуміло, як діяти, оскільки модель ніколи не може стабілізуватися.

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

Дивіться також Яка різниця між режимом виробництва та розробки в Angular2?

Багато розуміння з’явилося, коли я зрозумів кутові гачки життєвого циклу та їх зв’язок із виявленням змін.

Я намагався змусити 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>

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

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

Що я зробив, це здійснити AfterViewChecked, додати constructor(private changeDetector : ChangeDetectorRef ) {}і потім

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

Я сподіваюся, що це допомагає іншим, як і багато хто допомагав мені.

Виявлення зміни кутових запусків і коли виявляється, що деякі значення, передані дочірньому компоненту, були змінені. Кутове викидає помилку:

ExpressionChangedAfterItHasBeenCheckedError натисніть для отримання додаткової інформації

Для того, щоб виправити це, ми можемо використовувати AfterContentCheckedгак життєвого циклу і

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

  constructor(
  private cdref: ChangeDetectorRef) { }

  ngAfterContentChecked() {

    this.cdref.detectChanges();

  }

У моєму випадку я мав цю проблему у своєму специфікаційному файлі під час запуску тестів.

Я повинен був змінити ngIf до [hidden]

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

до

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

Виконайте наступні кроки:

1. Використовуйте "ChangeDetectorRef", імпортуючи його з @ angular / core, таким чином:

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

2. Реалізуйте його в конструкторі () наступним чином:

constructor(   private cdRef : ChangeDetectorRef  ) {}

3. Додайте до своєї функції такий метод, який ви дзвоните в такій події, як натискання кнопки. Так це виглядає приблизно так:

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

Я використовував ng2-carouselamos (Angular 8 & Bootstrap 4)

Нижче виправлена ​​моя проблема:

Що я зробив:

1. implement AfterViewChecked,  
2. add constructor(private changeDetector : ChangeDetectorRef ) {} and then 
3. ngAfterViewChecked(){ this.changeDetector.detectChanges(); }

Я зіткнувся з тією ж проблемою, що значення змінювалося в одному з масивів мого компонента. Але замість виявлення змін у зміні значення я змінив стратегію виявлення змін компонента на onPush(яка буде виявляти зміни на зміні об'єкта, а не на зміні значення).

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

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

Посилаючись на статтю https://blog.angularindepth.com/everything-you-need-to-know-about-the-expressionchangedafterithasbected verifiederror-error- e3fd9ce7dbb4

Таким чином, механізм виявлення змін насправді працює таким чином, що і датчики виявлення змін, і верифікація перевірок виконуються синхронно. Це означає, що якщо ми оновимо властивості асинхронно, значення не оновлюються під час запуску циклу підтвердження, і ми не отримаємо ExpressionChanged...помилки. Причина, за якою ми отримуємо цю помилку, полягає в тому, що під час процесу верифікації Angular бачить різні значення, ніж ті, які вона записала під час фази виявлення змін. Тож щоб уникнути цього….

1) Використовуйте changeDetectorRef

2) використовувати setTimeOut. Це виконає ваш код в іншій машині виклику як макрозадача. Angular не побачить цих змін під час перевірки, і ви не отримаєте цю помилку.

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

3) Якщо ви дійсно хочете виконати свій код на тому ж VM, використовуйте, як

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і недостатньо розумний, щоб знати, що це не проблема, тому він кидає виняток.

Одне з варіантів полягає в тому, щоб запровадити інший Image оболонку інсайдерського 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].

Для свого випуску я читав github - "ExpressionChangedAfterItHasBeenCheckedError при зміні значення компонента" non model "у afterViewInit" і вирішив додати ngModel

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

Це вирішило мою проблему, я сподіваюся, що це комусь допоможе.

Поради щодо налагодження

Ця помилка може бути дуже заплутаною, і легко зробити неправильне припущення про те, що саме відбувається. Мені корисно додати багато відповідних заяв про налагодження у відповідних місцях у відповідних місцях. Це допомагає зрозуміти потік.

У батьків викладіть такі твердження (важливий точний рядок "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');

У зворотному режимі / послуги / таймери:

    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), переконайтеся, що ви налагоджуєте ту, яку ви вважаєте, - встановивши її неясне значення кольору.

У моєму випадку я мав властивість асинхронізації в LoadingServiceBehavioralSubjectisLoading

Використання [прихованої] моделі працює, але * 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

Я сподіваюся, що це допомагає комусь, хто приходить сюди: Ми здійснюємо службові дзвінки ngOnInitнаступним чином і використовуємо змінну displayMainдля управління монтажем елементів до DOM.

компонент.ц

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

і компонент.html

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

Я отримав цю помилку, тому що я використовував змінну в компонент компонент.html, яка не була оголошена в компонент.тс. Після того, як я видалив частину в HTML, ця помилка зникла.

Я отримав цю помилку, оскільки я диспетчерував наддувні дії в модальному режимі, і модальний на той момент не відкривався. Я відправляв дії, коли модальний компонент отримує вхід. Тож я поклав туди setTimeout, щоб переконатися, що модальний режим відкритий, а потім дії передаються.

Комусь, хто бореться з цим. Ось спосіб правильно налагодити цю помилку: https://blog.angular-university.io/angular-debugging/

У моєму випадку я дійсно позбувся цієї помилки, використовуючи цей [прихований] хак замість * ngIf ...

Але зв'язок я надав дозволила мені знайти винних * ngIf :)

Насолоджуйтесь.

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