Angular 4 ExpressionChangedAfterItHasBeenCheckedError

dans ParentComponent =>

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: ''. Current value: '[object Object]'.
            at viewDebugError (vendor.bundle.js:8962)
            at expressionChangedAfterItHasBeenCheckedError (vendor.bundle.js:8940)

Composant Parent Html

<div>
  <app-child-widget [allItems]="allItems" (notify)="eventCalled($event)"></app-child-widget>
<div>

Composant Parent

export class ParentComponent implements OnInit {

  returnedItems: Array<any> = [];
  allItems: Array<any> = [];

  constructor(
  ) { }

  ngOnInit() {
     this.allItems = //load from server...
  }

  eventCalled(items: Array<any>): void {
    this.returnedItems = items;
  }
}

Composant enfant

@Component({
  selector: 'app-child-widget',
  templateUrl: 'child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {
  @Output() notify: EventEmitter<any> = new EventEmitter();
  @Input() private allItems: Array<any>;

  constructor() { }

  ngOnInit() {
    doSomething();
  }

  doSomething() {
    this.notify.emit(allItems);
  }
}

source d'informationauteur Saurabh Kumar | 2017-06-22

  1. 17

    L'article Tout ce que vous devez savoir sur le ExpressionChangedAfterItHasBeenCheckederror erreur explique ce comportement dans de grands détails

    Cause

    Votre problème est très similaire à cette mais au lieu de la mise à jour de la propriété parent par le biais d'un service que vous êtes à jour par le biais d'événements synchrones de radiodiffusion. Voici la citation de la lié répondre:

    Au cours de digérer cycle Angulaire effectue certaines opérations de l'enfant
    les directives. L'une de ces opérations, une mise à jour des entrées et de l'appel de
    ngOnInit crochet du cycle de vie de l'enfant, directives ou des composants. Ce qui est
    l'important est que ces opérations soient effectuées dans un ordre strict:

    • Mise à jour des entrées
    • Appel ngOnInit

    Donc dans votre cas Angulaire de la mise à jour de l'entrée de la liaison allItems sur composant enfant, qui s'appelait alors onInit sur composant enfant qui a causé une mise à jour de allItems de composant parent. Maintenant, vous avez une incohérence des données. Composant Parent a une valeur, tandis que l'enfant d'un autre. Si Angulaire continue la synchronisation des modifications que vous aurez une boucle infinie. C'est pourquoi, lors du prochain changement de cycle de détection Angulaire détecté que allItems a été changé, et jeté une erreur.

    Solution

    Il semble que c'est un défaut de conception que vous vous faites une mise à jour details de la mère et de l'enfant composant. Si elle ne l'est pas, alors vous pouvez résoudre le problème en émettant le cas asynchrone comme ceci:

    export class ChildComponent implements OnInit {
  @Output() notify: EventEmitter<any> = new EventEmitter(true);
                                                        ^^^^^^-------------

    Mais vous devez être très prudent. Si vous utilisez un autre crochet comme ngAfterViewChecked qui est appelée à chaque digérer cycle, vous vous retrouverez dans la dépendance cyclique!

  2. 0

    Dans mon cas, j'ai changé l'état de mes données--cette réponse vous oblige à lire AngularInDepth.com explication de digérer cycle -- à l'intérieur du niveau de html, tout ce que j'avais à faire était de changer la façon dont j'ai été à traiter les données comme suit:

    <div>{{event.subjects.pop()}}</div>

    en

    <div>{{event.subjects[0]}}</div>

    Résumé: au lieu de sauter--qui renvoie et de supprimer le dernier élément d'un tableau et donc de changer l'état de mes données, j'ai utilisé de la manière normale de l'obtention de mon données sans modifier son état empêchant l'exception.