Ausdruck ___ hat sich geändert, nachdem es überprüft wurde

Beachten Sie zunächst, dass diese exception wird nur geworfen werden, wenn Sie Ihre app im dev-Modus (was standardmäßig der Fall ist, wie der beta-0): Wenn Sie anrufen enableProdMode() beim bootstrapping der app, es wird nicht geworfen (siehe aktualisierte plunk).

Zweite, nicht, dass, weil diese Ausnahme wird geworfen, aus gutem Grund: In kurzen, wenn in den dev-Modus jede Runde, die der Erkennung von änderungen ist unmittelbar gefolgt von einer zweiten Runde, die überprüft, keine Bindungen haben sich geändert seit dem Ende des ersten, so würde dies darauf hinweisen, dass änderungen, die hervorgerufen werden durch die change detection selbst.

In Ihrem plunk, die Bindung {{message}} geändert durch Eure Berufung zu setMessage() ist, was geschieht in der ngAfterViewInit Haken, der Auftritt als Teil der Erstausbildung (change detection) aktivieren. Das ist an sich nicht problematisch, obwohl - das problem ist, dass setMessage() änderungen der verbindlich, aber nicht auslösen einer neuen Runde von change-detection, was bedeutet, dass diese änderung nicht erkannt werden, bis einige zukünftige Runde von change-detection ausgelöst wird woanders.

Den mitnehmen: Alles, verpasst eine Bindung muss zum auslösen einer Runde von change-detection -, wenn es funktioniert.

Update in Reaktion auf alle Anfragen für ein Beispiel, wie zu tun, dass: @Tycho ' s Lösung funktioniert, wie die drei Methoden in die Antwort @MarkRajcok hingewiesen. Aber ehrlich gesagt, Sie alle fühlen sich hässlich und falsch für mich, wie die Art von hacks haben wir genutzt, um sich auf in der ng1.

Sicher sein, es gibt gelegentliche Umstände, in denen diese hacks sind, aber wenn Sie sind mit Ihnen auf etwas mehr als ein sehr gelegentlichen basis, es ist ein Zeichen, dass Sie kämpfen den Rahmen nicht vollständig umarmen Sie Ihre reaktive Natur.

IMHO, mehr Redewendungen, "Angular2 Weg", dies zu erreichen, ist etwas entlang der Linien von: (plunk)

@Component({
  selector: 'my-app',
  template: `<div>I'm {{message | async}} </div>`
})
export class App {
  message:Subject<string> = new BehaviorSubject('loading :(');

  ngAfterViewInit() {
    this.message.next('all done loading :)')
  }
}

InformationsquelleAutor awqueous

Können Sie nicht verwenden ngOnInit weil Sie nur die änderung der member-variable message?

Wenn Sie Zugriff auf einen Verweis auf eine Kind-Komponente @ViewChild(ChildComponent) Sie wirklich brauchen, zu warten, bis es mit ngAfterViewInit.

Einen dirty fix ist, rufen Sie die updateMessage() im nächsten event-Schleife mit z.B. setTimeout.

ngAfterViewInit() {
  setTimeout(() => {
    this.updateMessage();
  }, 1);
}

InformationsquelleAutor Jo VdB

Den Artikel Alles, was Sie wissen müssen über die ExpressionChangedAfterItHasBeenCheckederror - Fehler erklärt das Verhalten in großen details.

Das problem mit der Einstellung ist, dass ngAfterViewInit lifecycle-hook wird ausgeführt, wenn der change detection verarbeitet DOM-updates. Und Sie sind effektiv beim ändern der Eigenschaft, die verwendet wird in der Vorlage in dieser Haken bedeutet, dass die DOM muss neu gerendert:

  ngAfterViewInit() {
    this.message = 'all done loading :)'; //needs to be rendered the DOM
  }

und dies erfordert ein anderes change-detection-Zyklus-und winkelversatz von design läuft nur eine digest-Zyklus.

Haben Sie grundsätzlich zwei alternativen, wie es zu beheben:

• aktualisieren Sie die Eigenschaft asynchron entweder mit setTimeout, Promise.then oder asynchrone beobachtbaren auf die in der Vorlage

• führen Sie die Eigenschaft update in einen Haken vor dem DOM-update - ngOnInit, ngDoCheck, ngAfterContentInit, ngAfterContentChecked.

InformationsquelleAutor Max Koretskyi aka Wizard

Dafür habe ich versucht, über viele Antworten funktioniert nicht in der neuesten version von Eckig (6 oder später)

Ich bin mit Material-Kontrolle, dass die erforderlichen änderungen, die nach der ersten Bindung getan.

    export class AbcClass implements OnInit, AfterContentChecked{
        constructor(private ref: ChangeDetectorRef) {}
        ngOnInit(){
            //your tasks
        }
        ngAfterViewInit() {
            this.ref.detectChanges();
        }
    }

Hinzufügen meine Antwort so, dies hilft, einige lösen Problem.

InformationsquelleAutor MarmiK

Es wirft einen Fehler, da der code aktualisiert, wenn ngAfterViewInit() genannt wird. Bedeutet, dass Ihre anfänglichen Wert wurde verändert, wenn ngAfterViewInit nehmen Sie Platz, Wenn Sie Sie nennen, in ngAfterContentInit() dann wird es kein Fehler.

ngAfterContentInit() {
    this.updateMessage();
}

InformationsquelleAutor Sandip - Full Stack Developer

Konnte ich nicht kommentieren @Biranchi s post, da ich nicht genügend Ruf hat, aber es behoben das problem für mich.

Eine Sache zu beachten!
Wenn das hinzufügen changeDetection: ChangeDetectionStrategy.OnPush auf die Komponente nicht funktioniert, und das ist eine untergeordnete Komponente (dumme Komponente) versuchen, indem es die Eltern auch.

Dieser Fehler wurde behoben, aber ich Frage mich, was sind die Nebenwirkungen von diesem.

InformationsquelleAutor TKDev