ExpressionChangedAfterItHasBeenCheckedError Açıklaması

Lütfen bana neden bu hatayı almaya devam ettiğimi açıklayın: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked.

Açıkçası, sadece dev modunda alıyorum, üretim yapımımda gerçekleşmiyor, ama çok sinir bozucu ve sadece geliştirme ortamımda eşyada görünmeyecek bir hataya sahip olmanın faydalarını anlamıyorum - - Muhtemelen anlayış eksikliğim yüzünden.

Genellikle, düzeltme yeterince kolaydır, sadece böyle bir setTimeout kod neden hata sarın:

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

Veya aşağıdaki gibi bir kurucu ile değişiklikleri algılamaya zorlayın constructor(private cd: ChangeDetectorRef) {}:

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

Ama neden sürekli olarak bu hatayla karşılaşıyorum? Bunu anlamak istiyorum, böylece gelecekte bu hileli düzeltmelerden kaçınabiliyorum.

Benzer bir sorunum vardı. Baktığımızda yaşam döngüsü kanca dokümantasyon , ben değiştim ngAfterViewInitiçin ngAfterContentInitve işe yaradı.

Bu hata, uygulamanızdaki gerçek bir sorunu gösterir, bu nedenle bir istisna atmak mantıklıdır.

Gelen devModedeğişim algılama modeli değişip değişmediğini kontrol etmek için her düzenli değişim algılama yayınlandıktan sonra ek bir oynama ekler.

Model, normal ve ek değişiklik algılama dönüşü arasında değiştiyse,

• değişiklik algılamanın kendisi bir değişikliğe neden oldu
• bir yöntem veya alıcı her çağrıldığında farklı bir değer döndürür

ikisi de kötü, çünkü nasıl ilerleyeceği belli değil çünkü model asla stabilize olmayabilir.

Açısal çalışma, model kararlı hale gelene kadar değişiklik algılamayı değiştirirse, sonsuza kadar çalışabilir. Açısal değişiklik algılama yapmazsa, görünüm modelin geçerli durumunu yansıtmayabilir.

Ayrıca bkz . Angular2'de üretim ve geliştirme modu arasındaki fark nedir?

Açısal Yaşam Döngüsü Kancalarını ve bunların değişim algılama ile ilişkilerini anladığımda çok fazla anlayış geldi .

Angular'ı *ngIfbir öğeye bağlı global bir bayrağı güncellemeye çalışıyordum ngOnInit()ve başka bir bileşenin yaşam döngüsü kancasındaki bayrağı değiştirmeye çalışıyordum .

Belgelere göre, bu yöntem Angular zaten değişiklikler tespit ettikten sonra çağrılır:

İlk ngOnChanges () 'den sonra bir kez çağrılır.

Dolayısıyla, içindeki bayrağın güncellenmesi ngOnChanges()değişiklik algılamayı başlatmaz. Ardından, değişiklik algılaması yeniden doğal olarak tetiklendikten sonra, bayrağın değeri değişti ve hata atıldı.

Benim durumumda bunu değiştirdim:

constructor(private globalEventsService: GlobalEventsService) {

}

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

Buna:

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

ngOnInit() {

}

ve sorunu düzeltti :)

Güncelleme

İlk önce OP'nin kendi tepkisi ile başlamayı şiddetle tavsiye ederim : constructorvs'de ne yapılması gerektiğini doğru bir şekilde düşünün ngOnChanges().

orijinal

Bu bir cevaptan çok bir yan nottur, ancak birisine yardımcı olabilir. Bir düğme varlığını formun durumuna bağlı yapmaya çalışırken bu sorun üzerinde tökezledi:

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

Bildiğim kadarıyla, bu sözdizimi, düğmeye bağlı olarak DOM'a eklenen ve kaldırılan düğmeye yol açar. Hangi sırayla yol açar ExpressionChangedAfterItHasBeenCheckedError.

Benim durumumdaki düzeltme (farkın tüm etkilerini kavradığını iddia etmeme rağmen), display: nonebunun yerine kullanmaktı :

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

İlginç cevaplar vardı ama benim ihtiyaçlarına uygun bir tane bulamadım, en yakın olan @ chittrang-mishra sadece belirli bir işleve atıfta bulunur ve benim uygulamada olduğu gibi birkaç geçiş yapar.

DOM'un bir parçası olmamaktan [hidden]faydalanmak istemedim, *ngIfbu yüzden hatayı düzeltmek yerine hatayı bastırdığı için herkes için en iyi olmayabilir aşağıdaki çözümü buldum, ancak benim durumumda nihai sonuç doğru, benim app için tamam görünüyor.

Yaptığım, uygulamak AfterViewChecked, eklemek constructor(private changeDetector : ChangeDetectorRef ) {}ve sonra

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

Umarım diğerleri bana yardımcı olduğu için bu başkalarına yardımcı olur.

Açısal çalıştırma değişiklik algılaması ve alt bileşene iletilen bazı değerlerin değiştiğini tespit ettiğinde, Açısal hatayı atar:

ExpressionChangedAfterItHasBeenCheckedError devamı için tıklayın

Bunu düzeltmek için AfterContentCheckedyaşam döngüsü kancasını kullanabilir ve

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

  constructor(
  private cdref: ChangeDetectorRef) { }

  ngAfterContentChecked() {

    this.cdref.detectChanges();

  }

Benim durumumda, testlerimi çalıştırırken spec dosyamda bu sorunu yaşadım.

Ben değişikliğine vardı ngIf için [hidden]

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

için

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

Aşağıdaki adımları izleyin:

1. @ açısal / çekirdekten aşağıdaki şekilde aktararak 'ChangeDetectorRef' kullanın:

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

2. Yapıcı () içine aşağıdaki gibi uygulayın:

constructor(   private cdRef : ChangeDetectorRef  ) {}

3. Aşağıdaki yöntemi, düğmeyi tıklatma gibi bir olayda çağırdığınız işlevlere ekleyin. Yani şuna benziyor:

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

I edildi NG2-carouselamos (Açısal 8 ve özyükleme 4) kullanılarak

Aşağıda sorunumu çözdüm:

Ben ne yaptım:

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

Bileşenimdeki diziden birinde değer değişiyordu aynı sorunla karşı karşıyaydım. Ancak değer değişimindeki değişiklikleri saptamak yerine, bileşen değişikliği algılama stratejisini onPush(değer değişiminde değil, nesne değişimindeki değişiklikleri algılayacak) olarak değiştirdim.

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 makalesine atıfta bulunarak

Dolayısıyla, değişiklik algılamanın arkasındaki mekanik aslında değişiklik algılama ve doğrulama özetlerinin eşzamanlı olarak gerçekleştirileceği şekilde çalışır. Bu, özellikleri eşzamansız olarak güncellersek, doğrulama döngüsü çalışırken değerler güncellenmeyecek ve ExpressionChanged...hata almayacağız . Bu hatayı almamızın nedeni, doğrulama işlemi sırasında Angular, değişiklik algılama aşamasında kaydettiklerinden farklı değerler görmesidir. Bundan kaçınmak için ....

1) changeDetectorRef kullanın

2) setTimeOut'u kullanın. Bu, kodunuzu başka bir sanal makinede makro görevi olarak yürütür. Açısal, doğrulama işlemi sırasında bu değişiklikleri görmez ve bu hatayı alamazsınız.

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

3) Kodunuzu gerçekten aynı VM kullanımında yürütmek istiyorsanız,

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

Bu bir mikro görev yaratacaktır. Mikro görev kuyruğu, geçerli eşzamanlı kod yürütme işlemi bittikten sonra işlenir, bu nedenle özelliğe yönelik güncelleme doğrulama adımından sonra gerçekleşir.

@HostBinding bu hatanın kafa karıştırıcı bir kaynağı olabilir.

Örneğin, bir bileşende aşağıdaki ana bilgisayar bağına sahip olduğunuzu varsayalım

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

Kolaylık olması açısından, bu özelliğin aşağıdaki input özelliği üzerinden güncellendiğini varsayalım:

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

Üst bileşende, programlı olarak ngAfterViewInit

@ViewChild(ImageCarousel) carousel: ImageCarousel;

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

İşte olanlar:

• Ana bileşeniniz oluşturuldu
• ImageCarousel bileşeni oluşturulur ve carousel(ViewChild aracılığıyla)
• Biz erişemez carouselkadar ngAfterViewInit()(o boş olacaktır)
• Ayarlanan yapılandırmayı atarız style_groupBG = 'red'
• Bu background: redda ana ImageCarousel bileşeninde ayarlanır
• Bu bileşenin üst bileşeniniz tarafından `` sahip olduğu '', bu nedenle değişiklikleri kontrol ettiğinde bir değişiklik bulur carousel.style.backgroundve bunun bir sorun olmadığını bilecek kadar zeki değildir, bu nedenle istisnayı atar.

Bir çözüm, başka bir sarmalayıcı div içeriden ImageCarousel'i tanıtmak ve bunun üzerinde arka plan rengini ayarlamaktır, ancak daha sonra kullanmanın bazı avantajlarından yararlanamazsınız HostBinding(örneğin, ebeveynin nesnenin tüm sınırlarını kontrol etmesine izin vermek gibi).

Ana bileşendeki daha iyi çözüm, config ayarlandıktan sonra detChanges () eklenmesidir.

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

Bu, bu şekilde ortaya çıkmış gibi görünebilir ve diğer cevaplara çok benzeyebilir, ancak ince bir fark vardır.

@HostBindingGeliştirme sırasında daha sonraya kadar eklemediğiniz durumu düşünün . Aniden bu hatayı alıyorsunuz ve herhangi bir anlam ifade etmiyor gibi görünüyor.

İşte neler olduğuna dair düşüncelerim. Belgeleri okumadım, ancak hatanın neden gösterildiğinin bir parçası olduğundan eminim.

*ngIf="isProcessing()" 

* NgIf kullanırken, koşul her değiştiğinde öğeyi ekleyerek veya kaldırarak DOM'yi fiziksel olarak değiştirir. Dolayısıyla koşul görünüme dönüştürülmeden önce değişirse (Angular'ın dünyasında oldukça olasıdır), hata atılır. Açıklamaya bakın burada geliştirme ve üretim modları arasında.

[hidden]="isProcessing()"

Kullanırken [hidden]fiziksel olarak değişmez, DOMsadece arkadan elementgörünümden gizlenir CSS. Öğe DOM'da hala var, ancak koşulun değerine bağlı olarak görünmüyor. Bu yüzden kullanırken hata oluşmaz [hidden].

Benim sorunum için github okuyordum - "ExpressionChangedAfterItHasBeenCheckedError afterViewInit bileşen 'model olmayan' değeri değiştirirken" ve ngModel eklemeye karar verdi

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

Sorunumu düzeltti, umarım birine yardımcı olur.

Hata ayıklama ipuçları

Bu hata oldukça kafa karıştırıcı olabilir ve tam olarak ne zaman oluştuğu hakkında yanlış bir varsayım yapmak kolaydır. Etkilenen bileşenler boyunca uygun yerlerde çok sayıda hata ayıklama ifadesi eklemeyi yararlı buluyorum. Bu akışı anlamaya yardımcı olur.

Ebeveynte böyle ifadeler koydu ('EXPRESSIONCHANGED' tam dizesi önemlidir), ancak bunun dışında sadece örnekler:

    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');

Alt / hizmetler / zamanlayıcı geri aramalarında:

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

Bunun detectChangesiçin manuel olarak günlük kaydı eklerseniz:

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

Ardından Chrome hata ayıklayıcısında sadece 'EXPRESSIONCHANGES' ile filtreleyin. Bu, tam olarak ayarlanan her şeyin akışını ve sırasını ve aynı zamanda Angular'ın hatayı hangi noktada attığını gösterir.

Kesme noktalarını koymak için gri bağlantıları da tıklayabilirsiniz.

Uygulamanız boyunca benzer şekilde adlandırılmış özelliklere sahipseniz (ör. style.background ) belirsiz bir renk değerine ayarlayarak, düşündüğünüzde hata ayıkladığınızdan emin olun.

Benim durumumda, LoadingServicebir BehavioralSubject ile zaman uyumsuz bir özellik vardıisLoading

Kullanılması [gizli] modeli işleri ancak * ngIf başarısız

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

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

Rxjs kullanarak benim için çalışan bir çözüm

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 (teknoloji yığınının bir parçası olarak Angular 4 kullanan) bu tür bir hata vardı.

Benim için bunu yapıyordu:

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

Ben şartlı bir türünü değiştirmeye çalışıyormuş Yani iyon simgesinden bir gelen pinbir etmekremove-circle , bir mod başına ekran üzerinde işletim oldu.

Sanırım *ngIfbunun yerine bir tane eklemek zorunda kalacağım .

Eklediğimde sorunum ortaya çıktı *ngIfama nedeni bu değildi. Hata, modeldeki {{}}etiketleri değiştirip *ngIfdaha sonra ifadede değiştirilen modeli görüntülemeye çalışmaktan kaynaklandı . İşte bir örnek:

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

Sorunu çözmek için, aradığım changeMyModelValue()yeri daha mantıklı bir yere değiştirdim .

Benim durumumda, changeMyModelValue()bir alt bileşen verileri her değiştirdiğinde çağırmak istedim . Bu, üst bileşenin üstesinden gelebilmesi için alt bileşende bir olay oluşturmamı ve yayınlamamı gerektirir ( changeMyModelValue()bkz. Https://angular.io/guide/component-interaction#parent-listens-for-child-event

Bunun buraya gelmesine yardımcı olacağını umuyorum: Hizmet çağrılarını ngOnInitaşağıdaki şekilde yapıyoruz displayMainve elemanların DOM'a montajını kontrol etmek için bir değişken kullanıyoruz .

component.ts

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

ve component.html

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

Bu hatayı aldım, çünkü component.ts içinde bildirilmeyen bir bileşeni component.html dosyasında kullandım. HTML'de parçayı kaldırdığımda, bu hata giderildi.

Bu hatayı aldım çünkü modalda redux eylemleri gönderiyordum ve modal o zaman açılmadı. Ben modal bileşen girdi almak eylemleri gönderme. Bu yüzden modalın açıldığından ve eylemlerin dipatched olduğundan emin olmak için setTimeout'u oraya koydum.

Bununla mücadele eden herkese. İşte bu hatayı düzgün bir şekilde hata ayıklamanın bir yolu: https://blog.angular-university.io/angular-debugging/

Benim durumumda, gerçekten bu hata * ngIf yerine bu [gizli] kesmek kullanarak kurtuldum ...

Ama sağlanan bağlantı bulmak için bana bir suçlu * ngIf :)

Zevk almak.

Çözüm ... hizmetler ve rxjs ... olay yayıcılar ve özellik bağlama hem rxjs kullanın ... sen kendini uygulamak daha iyidir, daha fazla kontrol, hata ayıklaması daha kolay. Olay yayıcıların rxjs kullandığını unutmayın. Basitçe, bir hizmet oluşturun ve gözlemlenebilir bir şekilde, her bir bileşenin gözlemciye abone olmasını sağlayın ve gerektiğinde yeni değer veya değer girin