Comment gérer Angular2 “l'expression a changé après qu'il a été vérifiée” exception lorsqu'une propriété d'un composant dépend datetime

Mon composant a des styles qui dépendent de courant de type datetime. Dans mon composant, j'ai la fonction suivante.

  private fontColor( dto : Dto ) : string {
    //date d'exécution du dto
    let dtoDate : Date = new Date( dto.LastExecution );

    (...)

    let color =  "hsl( " + hue + ", 80%, " + (maxLigness - lightnessAmp) + "%)";

    return color;
  }

lightnessAmp est calculée à partir du courant de datetime. Les changements de couleur si dtoDate est dans les dernières 24 heures.

L'erreur exacte est la suivante:

Expression a changé après qu'il ait été vérifié. Valeur précédente: 'hsl( 123, 80%, 49%)'. Valeur actuelle: 'hsl( 123, 80%, 48%)'

Je sais que l'exception apparaissent dans le mode de développement qu'au moment où la valeur est vérifiée. Si la valeur est différente de la valeur actualisée, l'exception est levée.

J'ai donc essayé de mettre à jour les datetime à chaque cycle de vie dans la suite de crochet méthode pour empêcher l'exception:

  ngAfterViewChecked()
  {
    console.log( "! changement de la date du composant !" );
    this.dateNow = new Date();
  }

...mais sans succès.

InformationsquelleAutor Anthony Brenelière | 2016-09-30
  1. 253

    Exécuter la détection de changement explicitement après le changement:

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

constructor(private cdRef:ChangeDetectorRef) {}

ngAfterViewChecked()
{
  console.log( "! changement de la date du composant !" );
  this.dateNow = new Date();
  this.cdRef.detectChanges();
}
    • Solution parfaite, merci. J'ai remarqué qu'il fonctionne aussi avec les suivantes crochet méthodes: ngOnChanges, ngDoCheck, ngAfterContentChecked. Donc, il y a une meilleure option ?
    • Cela dépend de votre cas d'utilisation. Si vous voulez faire quelque chose lorsqu'un composant est initialisé, ngOnInit() est habituellement la première place. Si le code dépend de la DOM rendu ngAfterViewInit() ou ngAfterContentInit() sont les options suivantes. ngOnChanges() est un bon ajustement si le code doit être exécuté à chaque fois qu'une entrée a été modifiée. ngDoCheck() est personnalisé pour la détection de changement. En fait, je ne sais pas ce que ngAfterViewChecked() est préférable de l'utiliser pour. Je pense qu'il est appelé juste avant ou après ngAfterViewInit().
    • Je suis d'essayer de changer cela.valeur afin d'empêcher une valeur non valide d'être ensemble, cependant la technique décrite ici ne fonctionne pas pour moi. Est-il un autre moyen que je doit faire?
    • Je pense que cela devrait fonctionner. Il serait peut-être préférable de créer un nouveau sujet avec votre code qui montre ce que vous essayez de accomlish.
    • J'ai du mal à mettre en œuvre cette technique dans ma situation, mais je ne suis pas du tout avoir de la chance, et il semble bien que si je ne suis pas sûr d'où le problème est survenu. Quelqu'un pour être en mesure de regarder la mienne? stackoverflow.com/questions/46982174/...
    • Est-il possible d'exécuter ngAfterViewChecked() dans .fichier ts?
    • c'est un composant événement de cycle de vie d'un appelé par Angulars la détection de changement. Il n'est pas censé être appelés à partir de votre code. Vous pouvez toujours déplacer le code à une autre méthode peut l'appeler à partir d'un Angulaires gestionnaire d'événement ou d'un fait observable abonnement de rappel.
    • Je sais, et donc posé la question. J'ai un scénario où je veux ouvrir un modal si l'entrée n'est pas cochée. Et à l'intérieur modal il y a 2 boutons - Oui et Non. En cliquant sur Oui que décoché d'entrée doit être vérifié et fermé le modal.... Donc à la recherche d'une solution qui peut être utilisé directement à l'intérieur du modèle. Cette case peut être répété à travers *ngFor...
    • désolé, ne peut pas faire sens à partir de votre description. Je te suggère de créer une nouvelle question avec le code qui montre ce que vous essayez d'accomplir. Idéalement avec un StackBlitz exemple.
    • C'est également une excellente solution si votre composant de l'état est basée sur un navigateur calculé DOM des propriétés, comme clientWidth, etc.
    • Provoque un changement de détection de boucle si on l'appelle dans l'abonnement à l'intérieur des crochets.

    InformationsquelleAutor Günter Zöchbauer
  2. 34

    C'est un joli post pour comprendre cette erreur. Ce n'est pas trop long à lire.

    • Il sera grand si vous pouvez publier du contenu pertinent ici de lui-même, Si l'url est cassé la réponse n'a aucune valeur. Lien seules réponses sont découragés
    • le lien est cassé maintenant
    • De l'information pertinente a été posté ici: stackoverflow.com/a/54954374/1657465
    InformationsquelleAutor tomonari_t
  3. 18

    Comme mentionné par @leocaseiro sur github problème.

    J'ai trouvé 3 solutions pour ceux qui sont à la recherche de solutions faciles.

    1) passer de ngAfterViewInit à ngAfterContentInit

    2) Déplacement à ngAfterViewChecked combiné avec ChangeDetectorRef comme
    proposé sur #14748 (commentaire)

    3) Garder avec ngOnInit (), mais l'appel ChangeDetectorRef.detectChanges() après
    vos modifications.

    • Quelqu'un peut-document ce qui est le plus recommandé solution?
    InformationsquelleAutor candidJ
  4. 15

    Petite solution de contournement pour ce problème:

    ngAfterViewInit() { //or ngOnInit or whatever
    setTimeout(() => {
        this.dateNow = new Date();
    });
}
    • Je pense que c'est la meilleure option. Tout en encore hacky, tout angulaire développeur sait ce que ce est à propos de...
    • Semble être plus lent que la solution choisie
    • Ce n'est pas la meilleure solution, mais putain cela fonctionne TOUJOURS. La réponse choisie ne fonctionne pas toujours (on a besoin de comprendre le crochet assez bien pour le faire fonctionner)
    • Quelle est la bonne explication pourquoi cela fonctionne, quelqu'un sait? Est-ce parce que c'puis exécute dans un Thread différent (async)?
    • Il n'y a pas une telle chose comme thread différent en javascript. JS est monothread par la nature. SetTimeout dit juste le moteur pour exécuter la fonction peu de temps après l'expiration de la minuterie. Ici, la minuterie est 0, ce qui est effectivement traitée comme 4 dans les navigateurs modernes, ce qui est beaucoup de temps pour angulaire de faire sa magie des bidules: developer.mozilla.org/en-US/docs/Web/API/...
    InformationsquelleAutor Sergei Panfilov
  5. 4

    Dans notre cas, nous avons CORRIGÉ par l'ajout de changeDetection dans le composant et l'appeler detectChanges() dans ngAfterContentChecked, le code comme suit

    @Component({
  selector: 'app-spinner',
  templateUrl: './spinner.component.html',
  styleUrls: ['./spinner.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class SpinnerComponent implements OnInit, OnDestroy, AfterContentChecked {

  show = false;

  private subscription: Subscription;

  constructor(private spinnerService: SpinnerService, private changeDedectionRef: ChangeDetectorRef) { }

  ngOnInit() {
    this.subscription = this.spinnerService.spinnerState
      .subscribe((state: SpinnerState) => {
        this.show = state.show;
      });
  }

  ngAfterContentChecked(): void {
      this.changeDedectionRef.detectChanges();
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }

}
    InformationsquelleAutor Charitha Goonewardena
  6. 3

    Un petit travail, j'ai utilisé de nombreuses fois

    JS:

    Promise.resolve(null).then(() => {
    console.log( "! changement de la date du composant !" );
    this.dateNow = new Date();
    this.cdRef.detectChanges();
});

    Je fais essentiellement de remplacer la valeur "null" avec une variable que j'utilise dans le contrôleur.

    InformationsquelleAutor Khateeb321
  7. 2

    Je pense que la meilleure et la plus propre solution vous pouvez l'imaginer, c'est ce:

    @Component( {
  selector: 'app-my-component',
  template: `<p>{{ myData?.anyfield }}</p>`,
  styles: [ '' ]
} )
export class MyComponent implements OnInit {
  private myData;

  constructor( private myService: MyService ) { }

  ngOnInit( ) {
    /* 
      async .. await 
      clears the ExpressionChangedAfterItHasBeenCheckedError exception.
    */
    this.myService.myObservable.subscribe(
      async (data) => { this.myData = await data }
    );
  }
}

    Testé Angulaire 5.2.9

    • C'est hacky .. et ainsi de unneccesairy.
    • toutes les autres solutions ci-dessus sont des solutions basées sur setTimeouts ou avancé Angulaire des événements... cette solution, c'est de la pure ES2017 pris en charge par tous les commandants des navigateurs developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/... caniuse.com/#search=await
    • Que faire si vous êtes la construction d'une application mobile (ciblage de l'API Android 17) à l'aide Angulaire + Cordoue par exemple, où vous ne pouvez pas compter de ES2017 fonctionnalités? Note accepté la réponse est une solution, pas un travail autour..
    • Comment cela fonctionne? veuillez expliquer, merci!
    • À l'aide de la machine, il est compilé en JS, donc pas de support de la fonction d'enjeux.
    • Que voulez-vous dire avec qui? Je sais Tapuscrit sera compilé en JS, mais qui ne rend pas en mesure d'assumer tous les JS fonctionne. Notez que le Javascript est lancé dans un webbrowser, et chaque navigateur se comporte différent sur elle.

    InformationsquelleAutor JavierFuentes
  8. 2

    Voici un petit extrait de tomonari_t réponse sur les causes de cette erreur, j'ai essayé d'inclure uniquement les parties qui m'a aidé à le comprendre.

    L'article complet montre de vrais exemples de code sur chaque point indiqué ici.

    La cause racine est angulaire du cycle de vie de l':

    Après chaque opération Angulaire se souvient des valeurs qu'elle a utilisé pour effectuer
    une opération. Ils sont stockés dans le oldValues propriété de la
    vue component.

    Après les contrôles ont été effectués pour tous les composants Angulaire commence alors
    la prochaine digérer cycle, mais au lieu d'effectuer des opérations, il compare les valeurs actuelles avec celles qu'il se souvient de
    la précédente digérer cycle.

    Les opérations suivantes sont en cours de vérification à digérer cycle:

    vérifier que les valeurs transmises à l'enfant les composants sont les mêmes que
    les valeurs qui devraient être utilisés pour mettre à jour les propriétés de ces composants
    maintenant.

    vérifier que les valeurs utilisées pour mettre à jour les éléments du DOM sont les mêmes que
    les valeurs qui pourraient être utilisés pour mettre à jour ces éléments maintenant effectuer la
    de même.

    vérifie tous les composants enfants

    Et donc, l'erreur est levée lorsque les valeurs comparées sont différentes., blogueur Max Koretskyi a déclaré:

    Le coupable est toujours l'enfant de composant ou d'une directive.

    Et enfin, voici quelques vrais échantillons qui est généralement la cause de cette erreur:

    • De services partagés
    • Événement synchrone de radiodiffusion
    • Composante dynamique de l'instanciation de

    Chaque exemple peut être trouvé ici (plunkr), dans mon cas, le problème a été une composante dynamique de l'instanciation.

    Aussi, par ma propre expérience, je recommande fortement tout le monde à éviter la setTimeout solution, dans mon cas, a provoqué une "presque" boucle infinie (21 appels que je ne suis pas prêt à vous montrer comment les provoquer),

    Je vous recommande de toujours garder à l'esprit Angulaire du cycle de vie de sorte que vous pouvez prendre en compte la façon dont ils seraient affectés à chaque fois que vous modifiez une autre composante de la valeur. Avec cette erreur Angulaire est de vous dire:

    Vous êtes peut-être faire mal, êtes-vous sûr que vous êtes de droite?

    Le même blog, dit aussi:

    Souvent, la solution est d'utiliser le droit de la détection de changement de crochet pour créer un composant dynamique

    Un petit guide pour moi, c'est de considérer au moins deux choses lors de l'encodage (je vais essayer de le compléter au fil du temps):

    1. Éviter modifiant composant parent valeurs de childs composants,
      au lieu de cela: de les modifier à partir de son parent.
    2. Lorsque vous utilisez @Input et @Output directives essayez d'éviter de déclencher lyfecycle modifications, sauf si le composant est complètement initialisé.
    InformationsquelleAutor Luis Limas