L'espressione ___ è cambiata dopo essere stata controllata

Perché è il componente in questo semplice plunk

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

  ngAfterViewInit() {
    this.updateMessage();
  }

  updateMessage(){
    this.message = 'all done loading :)'
  }
}

lancio:

ECCEZIONE: l'espressione 'I'm {{message}} in App @ 0: 5' è cambiata dopo che è stata controllata. Valore precedente: 'Sto caricando :('. Valore corrente: 'Ho finito il caricamento :)' in [Sono {{message}} in App @ 0: 5]

quando tutto quello che sto facendo è aggiornare una semplice associazione quando viene avviata la mia vista?

Come affermato da drewmoore, la soluzione corretta in questo caso è attivare manualmente il rilevamento delle modifiche per il componente corrente. Questo viene fatto utilizzando il detectChanges()metodo ChangeDetectorRefdell'oggetto (importato da angular2/core) o il suo markForCheck()metodo, che consente anche l'aggiornamento di qualsiasi componente padre. Esempio pertinente :

import { Component, ChangeDetectorRef, AfterViewInit } from 'angular2/core'

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

  constructor(private cdr: ChangeDetectorRef) {}

  ngAfterViewInit() {
    this.message = 'all done loading :)'
    this.cdr.detectChanges();
  }

}

Qui ci sono anche Plunkers che dimostrano gli approcci ngOnInit , setTimeout e enableProdMode per ogni evenienza.

Innanzitutto, tieni presente che questa eccezione verrà generata solo quando esegui la tua app in modalità dev (che è il caso per impostazione predefinita a partire da beta-0): se chiami enableProdMode()quando esegui il bootstrap dell'app, non verrà generata ( vedi plunk aggiornato ).

In secondo luogo, non farlo perché questa eccezione viene generata per una buona ragione: in breve, quando si è in modalità dev, ogni round di rilevamento delle modifiche è immediatamente seguito da un secondo round che verifica che nessun binding sia cambiato dalla fine del primo, poiché ciò indicherebbe che i cambiamenti sono causati dal rilevamento stesso del cambiamento.

Nel plunk, l'associazione {{message}}viene modificata dalla chiamata a setMessage(), che avviene in modalità ngAfterViewInithook, che si verifica come parte del turno di rilevamento delle modifiche iniziali. Ciò di per sé non è problematico, il problema è che setMessage()cambia l'associazione ma non attiva un nuovo ciclo di rilevamento delle modifiche, il che significa che questo cambiamento non verrà rilevato fino a quando non verrà attivato da qualche altra parte il futuro ciclo di rilevamento delle modifiche.

Il takeaway: tutto ciò che cambia un'associazione deve attivare un round di rilevamento delle modifiche quando lo fa.

Aggiorna in risposta a tutte le richieste per un esempio di come farlo : la soluzione di @ Tycho funziona, come fanno i tre metodi nella risposta @MarkRajcok. Ma francamente, si sentono tutti brutti e sbagliati per me, come il tipo di hack a cui ci siamo abituati appoggiandoci in ng1.

A dire il vero, ci sono circostanze occasionali in cui questi hack sono appropriati, ma se li stai usando su qualcosa di più di una base molto occasionale, è un segno che stai combattendo il framework piuttosto che abbracciare completamente la sua natura reattiva.

IMHO, un modo più idiomatico di "Angular2" per avvicinarsi a questo è qualcosa sulla falsariga di: ( 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 :)')
  }
}

ngAfterViewChecked() ha funzionato per me:

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

constructor(private cdr: ChangeDetectorRef) { }
ngAfterViewChecked(){
   //your code to update the model
   this.cdr.detectChanges();
}

Ho risolto questo problema aggiungendo ChangeDetectionStrategy dal nucleo angolare.

import {  Component, ChangeDetectionStrategy } from '@angular/core';
@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  selector: 'page1',
  templateUrl: 'page1.html',
})

Non puoi usare ngOnInitperché hai appena cambiato la variabile membro message?

Se si desidera accedere a un riferimento a un componente figlio @ViewChild(ChildComponent), è necessario attendere con esso ngAfterViewInit.

Una soluzione sporca è quella di chiamare il updateMessage()nel prossimo ciclo di eventi con es. SetTimeout.

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

Per questo ho provato sopra le risposte che molti non funzionano nell'ultima versione di Angular (6 o successive)

Sto usando il controllo materiale che ha richiesto modifiche dopo la prima rilegatura.

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

Aggiungendo la mia risposta così, questo aiuta alcuni a risolvere un problema specifico.

L'articolo Tutto ciò che devi sapere ExpressionChangedAfterItHasBeenCheckedErrorsull'errore spiega il comportamento in modo dettagliato.

Il problema con la configurazione è che l' ngAfterViewInithook del ciclo di vita viene eseguito dopo gli aggiornamenti DOM elaborati per il rilevamento delle modifiche. E stai cambiando in modo efficace la proprietà utilizzata nel modello in questo hook, il che significa che DOM deve essere ridistribuito:

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

e ciò richiederà un altro ciclo di rilevamento delle modifiche e Angular by design esegue solo un ciclo digest.

Fondamentalmente hai due alternative su come risolverlo:

• aggiornare la proprietà asincrono sia usando setTimeout, Promise.theno asincrona osservabile fatto riferimento nel modello

• eseguire l'aggiornamento della proprietà in un hook prima dell'aggiornamento DOM: ngOnInit, ngDoCheck, ngAfterContentInit, ngAfterContentChecked.

Devi solo aggiornare il tuo messaggio nel giusto hook del ciclo di vita, in questo caso ngAfterContentCheckedinvece che ngAfterViewInit, perché in ngAfterViewInit è stato avviato un controllo per il messaggio variabile ma non è ancora terminato.

vedi: https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html#!#afterview

quindi il codice sarà solo:

import { Component } from 'angular2/core'

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

  ngAfterContentChecked() {
     this.message = 'all done loading :)'
  }      
}

guarda la demo funzionante su Plunker.

Questo errore sta arrivando perché il valore esistente viene aggiornato immediatamente dopo l'inizializzazione. Quindi, se aggiornerai un nuovo valore dopo che il valore esistente è stato reso in DOM, allora funzionerà bene. Come menzionato in questo articolo Debugging angolare "L'espressione è cambiata dopo che è stata controllata"

per esempio puoi usare

ngOnInit() {
    setTimeout(() => {
      //code for your new value.
    });

}

o

ngAfterViewInit() {
  this.paginator.page
      .pipe(
          startWith(null),
          delay(0),
          tap(() => this.dataSource.loadLessons(...))
      ).subscribe();
}

Come puoi vedere non ho menzionato il tempo nel metodo setTimeout. Poiché è un'API fornita dal browser, non un'API JavaScript, quindi verrà eseguita separatamente nello stack del browser e attenderà il completamento degli elementi dello stack delle chiamate.

Come l'API del browser invoca il concetto è spiegato da Philip Roberts in uno dei video di Youtube (Cos'è l'hacking il loop degli eventi?).

Puoi anche inviare la tua chiamata a updateMessage () nel metodo ngOnInt (), almeno funziona per me

ngOnInit() {
    this.updateMessage();
}

In RC1 questo non attiva l'eccezione

È inoltre possibile creare un timer utilizzando la Observable.timerfunzione rxjs e quindi aggiornare il messaggio nell'abbonamento :                    

Observable.timer(1).subscribe(()=> this.updateMessage());

Viene generato un errore perché il codice viene aggiornato quando viene chiamato ngAfterViewInit () . Significa che il valore iniziale è stato modificato quando si verifica ngAfterViewInit, se lo si chiama in ngAfterContentInit (), non verrà generato un errore.

ngAfterContentInit() {
    this.updateMessage();
}

Non ho potuto commentare il post di @Biranchi poiché non ho abbastanza reputazione, ma mi ha risolto il problema.

Una cosa da notare! Se aggiungi changeDetection: ChangeDetectionStrategy.OnPush sul componente non ha funzionato, ed è un componente figlio (componente stupido) prova ad aggiungerlo anche al genitore.

Questo risolto il bug, ma mi chiedo quali sono gli effetti collaterali di questo.

Ho avuto un errore simile mentre lavoravo con datatable. Quello che succede è quando usi * ngPer all'interno di un altro * ngPer datatable lanciare questo errore mentre intercetta il ciclo di cambio angolare. SO invece di usare datatable dentro datatable usa una tabella normale o sostituisci mf.data con il nome dell'array. Funziona benissimo.

Penso che una soluzione molto semplice sarebbe la seguente:

1. Effettuare un'implementazione dell'assegnazione di un valore a qualche variabile, ad esempio tramite funzione o setter.
2. Crea una variabile di classe (static working: boolean)nella classe in cui esiste questa funzione e ogni volta che la chiami, rendila vera come preferisci. All'interno della funzione, se il valore del lavoro è vero, allora semplicemente ritorna subito senza fare nulla. altrimenti, esegui l'attività che desideri. Assicurati di cambiare questa variabile in false una volta completata l'attività, ovvero alla fine della riga di codici o nel metodo di iscrizione quando hai finito di assegnare valori!