ExpressionChangedAfterItHasBeenCheckedError : L'expression a changé après avoir été vérifiée. Valeur précédente : 'undefined'.

Question

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

Composant 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>

Remarque : Ce composant est chargé dynamiquement à l'aide du DynamicComponentLoader.

Après mon enquête, j'ai identifié quelques problèmes.

Tout d'abord, ce composant enfant est chargé dynamiquement en utilisant DynamicComponentResolver et en passant 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 j'ai modifié le html de mon composant enfant comme ci-dessous, j'obtiens la même erreur. il suffit d'ajouter un attribut angular ngclass.

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

</div>

Mes liaisons de données et tout le reste fonctionnent bien, dois-je faire quelque chose sur le composant parent ? J'ai déjà essayé tous les événements du cycle de vie dans le composant enfant.

Answer 1

Vous devez dire angular que vous avez mis à jour le contenu après ngAfterContentChecked vous pouvez importer ChangeDetectorRef de @angular/core et appeler detectChanges

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

constructor( private cdref: ChangeDetectorRef ) {}

ngAfterContentChecked() {

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

 }

Answer 2

Le site ngAfterContentChecked est déclenché lorsque les mises à jour des liens pour les composants/directives enfants sont déjà terminées. Mais vous mettez à jour la propriété qui est utilisée comme une entrée de liaison pour la directive ngClass directive. C'est là que réside le problème. Quand Angular exécute l'étape de validation, il détecte qu'il y a une mise à jour en attente des propriétés et lance l'erreur.

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

• Tout ce que vous devez savoir sur le ExpressionChangedAfterItHasBeenCheckedError erreur
• Tout ce que vous devez savoir sur la détection des changements dans Angular

Réfléchissez à la raison pour laquelle vous devez modifier la propriété dans le fichier ngAfterViewInit le crochet du cycle de vie. Tout autre cycle de vie qui est déclenché avant ngAfterViewInit/Checked fonctionnera, par exemple ngOnInit ou ngDoCheck ou ngAfterContentChecked .

Donc pour le réparer, bougez renderWidgetInsideWidgetContainer à la ngOnInit() le crochet du cycle de vie.

Answer 3

Si vous utilisez <ng-content> avec *ngIf vous allez forcément tomber dans cette boucle.

La seule solution que j'ai trouvée était de changer *ngIf à display:none fonctionnalité

Answer 4

Deux solutions :

1. Assurez-vous que si vous avez des variables de liaison, alors déplacez ce code vers settimeout ( { }, 0) ;
2. Déplacez votre code connexe vers ngAfterViewInit méthode

Answer 5

J'ai eu le même problème en essayant de faire la même chose que vous et je l'ai résolu avec quelque chose de similaire à la réponse de Richie Fredicson.

Lorsque vous exécutez createComponent(), il est créé avec des variables d'entrée non définies. Ensuite, lorsque vous attribuez des données à ces variables d'entrée, cela change les choses et provoque cette erreur dans votre modèle enfant (dans mon cas, c'était parce que j'utilisais l'entrée dans un ngIf, qui a changé une fois que j'ai attribué les données d'entrée).

Le seul moyen que j'ai trouvé pour l'éviter dans ce cas précis est de forcer la détection des changements après avoir assigné les données, mais je ne l'ai pas fait dans ngAfterContentChecked().

Votre exemple de code est un peu difficile à suivre mais si ma solution fonctionne pour vous, ce serait quelque chose comme ceci (dans le composant parent) :

export class ParentComponent implements AfterViewInit {
  // I'm assuming you have a WidgetDirective.
  @ViewChild(WidgetDirective) widgetHost: WidgetDirective;

  constructor(
    private componentFactoryResolver: ComponentFactoryResolver,
    private changeDetector: ChangeDetectorRef
  ) {}

  ngAfterViewInit() {
    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;
    // This <IDataBind> type you are using here needs to be changed to be the component
    // type you used for the call to resolveComponentFactory() above (if it isn't already).
    // It tells it that this component instance if of that type and then it knows
    // that WidgetDataContext and WidgetPosition are @Inputs for it.
    (<IDataBind>componentRef.instance).WidgetDataContext = this.dataSource.DataContext;
    (<IDataBind>componentRef.instance).WidgetPosition = this.dataSource.Position;
    this.changeDetector.detectChanges();
  }
}

Le mien est presque le même que celui-là, sauf que j'utilise @ViewChildren au lieu de @ViewChild car j'ai plusieurs éléments hôtes.