ExpressionChangedAfterItHasBeenCheckedError: L'expression a été modifiée après sa vérification. Valeur précédente: 'undefined'

Question

Je sais qu'il y a beaucoup de questions déjà posées dans stackoverflow et j'ai essayé différentes solutions pour éviter l'erreur d'exécution, mais aucune d'entre elles ne fonctionne pas pour moi.

composants et Code Html

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> 

S'il vous plaît Remarque: Ce composant est chargé dynamiquement à l'aide DynamicComponentLoader

Après mon tir de détresse, je l'ai identifié quelques questions

tout d'abord ce composant enfant est chargé dynamiquement en utilisant DynamicComponentResolver et passer les valeurs d'entrée comme ci-dessous

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; 

    } 

Même si je changeais mon html composant enfant comme ci-dessous, je reçois ce même error.Just ajouter un angle ngclass attribut

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

</div> 

Mon databinding et tout travaillent fine.Do je dois faire quoi que ce soit sur le composant parent? J'ai déjà essayé tous les événements lifecyle dans le composant enfant

Answer 1

Le hook de cycle de vie ngAfterContentChecked est déclenché lorsque les mises à jour des liaisons pour les composants/directives enfant ont déjà été terminées. Mais vous mettez à jour la propriété utilisée comme entrée de liaison pour la directive ngClass. C'est le problème. Lorsque Angular exécute l'étape de validation, il détecte qu'une mise à jour des propriétés est en attente et renvoie l'erreur.

Pour comprendre l'erreur mieux, lire ces deux articles:

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

Pensez à pourquoi vous avez besoin de changer la propriété dans le crochet du cycle de vie ngAfterViewInit. Tout autre cycle de vie déclenché avant ngAfterViewInit/Checked fonctionnera, par exemple ngOnInit ou ngDoCheck ou ngAfterContentChecked. Pour résoudre ce problème, déplacez renderWidgetInsideWidgetContainer vers le crochet de cycle de vie ngOnInit().

Answer 2

vous devez dire que vous angulaire mis à jour le contenu après ngAfterContentChecked vous pouvez importer ChangeDetectorRef de @ angulaire/noyau et appelez 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(); 

    }