ExpressionChangedAfterItHasBeenCheckedError: Der Ausdruck wurde nach der Überprüfung geändert. Previous value: 'undefined'

Question

Ich weiß, es gibt viele gleiche Fragen, die bereits in stackoverflow gepostet wurden und verschiedene Lösungen ausprobiert haben, um den Laufzeitfehler zu vermeiden, aber keiner von ihnen funktioniert nicht für mich.

Komponenten und HTML-Code

export class TestComponent implements OnInit, AfterContentChecked { 
    @Input() DataContext: any; 
    @Input() Position: any; 
    sampleViewModel: ISampleViewModel = { DataContext: : null, Position: null }; 
    constructor(private validationService: IValidationService, private modalService: NgbModal, private cdRef: ChangeDetectorRef) { 
    } 

    ngOnInit() { 

    } 
    ngAfterContentChecked() { 

      debugger; 
      this.sampleViewModel.DataContext = this.DataContext; 
      this.sampleViewModel.Position = this.Position; 

    } 


<div class="container-fluid sample-wrapper text-center" [ngClass]="sampleViewModel.DataContext?.Style?.CustomCssClass +' samplewidget-'+ sampleViewModel.Position?.Columns + 'x' + sampleViewModel.Position?.Rows"> 
    //some other html here 
</div> 

Bitte beachten Sie: Diese Komponente wird dynamisch geladen DynamicComponentLoader mit

nach meinem Troubleshooting ich einige Probleme identifiziert haben

Zunächst einmal dieses Kind Komponente wird dynamisch durch die Verwendung DynamicComponentResolver und vorbei an den Eingangswerte wie unten

ngAfterViewInit() { 
    this.renderWidgetInsideWidgetContainer(); 

    } 


    renderWidgetInsideWidgetContainer() { 
    let component = this.storeFactory.getWidgetComponent(this.dataSource.ComponentName); 
    let componentFactory = this._componentFactoryResolver.resolveComponentFactory(component); 
    let viewContainerRef = this.widgetHost.viewContainerRef; 
    viewContainerRef.clear(); 
    let componentRef = viewContainerRef.createComponent(componentFactory); 
    debugger; 
    (<IDataBind>componentRef.instance).WidgetDataContext = this.dataSource.DataContext; 
    (<IDataBind>componentRef.instance).WidgetPosition = this.dataSource.Position; 

    } 

geladen, auch wenn ich wie mein Kind Komponente html geändert unten ich das gleiche error.Just hinzufügen bin immer einen Winkel ngclass Attribut

<div class="container-fluid ds-iconwidget-wrapper text-center" [ngClass]="Sample"> 

</div> 

Meine Datenbindung und alles arbeiten fine.Do muss ich alles auf übergeordnete Komponente tun? Ich habe bereits versucht, alle Lifecyle-Ereignisse in Kindkomponente

Answer 1

Die ngAfterContentChecked Lifecycle-Hook wird ausgelöst, wenn Bindungen Updates für die untergeordneten Komponenten/Richtlinien bereits abgeschlossen wurden. Sie aktualisieren jedoch die Eigenschaft, die als verbindliche Eingabe für die -Direktive verwendet wird. Das ist das Problem. Wenn Angular die Validierungsstufe ausführt, erkennt es, dass eine ausstehende Aktualisierung der Eigenschaften vorliegt, und löst den Fehler aus.

Um die Fehler besser, lesen Sie diese beiden Artikel verstehen:

• Everything you need to know about the ExpressionChangedAfterItHasBeenCheckedError error
• Everything you need to know about change detection in Angular

Überlegen Sie, warum Sie die Eigenschaft in den Haken ngAfterViewInit Lebenszyklus zu ändern. Jeder andere Lebenszyklus, der vor ngAfterViewInit/Checked ausgelöst wird, funktioniert z. B. ngOnInit oder ngDoCheck oder ngAfterContentChecked.

Also, um es zu beheben bewegen renderWidgetInsideWidgetContainer auf den ngOnInit() Lebenszyklus Haken.

Answer 2

Sie haben Winkel zu sagen, dass Sie die Inhalte nach ngAfterContentChecked aktualisiert Sie ChangeDetectorRef von @ Winkel/Kern und rufen detectChanges

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

constructor(private cdref: ChangeDetectorRef) {} 



ngAfterContentChecked() { 

debugger; 
this.sampleViewModel.DataContext = this.DataContext; 
this.sampleViewModel.Position = this.Position; 
this.cdref.detectChanges(); 

    }