A expressão ___ mudou após ser verificada

Por que o componente deste simples puxão

@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 :)'
  }
}

jogando:

EXCEÇÃO: A expressão 'Estou {{message}} no App @ 0: 5' foi alterada após a verificação. Valor anterior: 'Estou carregando :('. Valor atual: 'Estou pronto para carregar :)' em [Estou {{message}} no App @ 0: 5]

quando tudo o que estou fazendo é atualizar uma ligação simples quando minha visualização é iniciada?

Conforme declarado por drewmoore, a solução adequada nesse caso é acionar manualmente a detecção de alterações para o componente atual. Isso é feito usando o detectChanges()método do ChangeDetectorRefobjeto (importado de angular2/core) ou seu markForCheck()método, que também atualiza qualquer componente pai. Exemplo relevante :

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();
  }

}

Aqui também estão Plunkers demonstrando as abordagens ngOnInit , setTimeout e enableProdMode , apenas por precaução.

Primeiro, observe que essa exceção só será lançada quando você estiver executando seu aplicativo no modo dev (que é o caso por padrão no beta-0): se você chamar enableProdMode()ao inicializar o aplicativo, ele não será lançado ( consulte plunk atualizado ).

Segundo, não faça isso porque essa exceção está sendo lançada por uma boa razão: em resumo, quando no modo dev, todas as rodadas de detecção de alterações são seguidas imediatamente por uma segunda rodada que verifica se nenhuma ligação foi alterada desde o final da primeira, pois isso indica que as alterações estão sendo causadas pela própria detecção de alterações.

Na sua conexão, a ligação {{message}}é alterada pela sua chamada para setMessage(), o que ocorre no ngAfterViewInitgancho, que ocorre como parte da curva inicial de detecção de alterações. Porém, isso por si só não é problemático - o problema é que setMessage()altera a ligação, mas não aciona uma nova rodada de detecção de alterações, o que significa que essa alteração não será detectada até que alguma futura rodada de detecção de alterações seja acionada em outro lugar.

O ponto principal: tudo o que altera uma ligação precisa acionar uma rodada de detecção de alterações quando isso ocorre.

Atualize em resposta a todos os pedidos de um exemplo de como fazer isso : a solução do @ Tycho funciona, assim como os três métodos na resposta que o @MarkRajcok apontou. Mas, francamente, todos eles se sentem feios e errados para mim, como o tipo de hacks que nos acostumamos a usar no ng1.

Para ter certeza, existem ocasionais circunstâncias em que estes hacks são apropriados, mas se você estiver usando-os em qualquer coisa mais do que um muito ocasional, é um sinal de que você está lutando contra a estrutura, em vez de abraçar plenamente a sua natureza reativa.

IMHO, um "Angular2 maneira" mais idiomática de abordar isso é algo ao longo das linhas de: ( 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() trabalhou para mim:

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

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

Corrigi isso adicionando ChangeDetectionStrategy do núcleo angular.

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

Você não pode usar ngOnInitporque acabou de alterar a variável de membro message?

Se você deseja acessar uma referência a um componente filho @ViewChild(ChildComponent), é necessário aguardá-lo ngAfterViewInit.

Uma correção suja é chamar updateMessage()o próximo loop de evento com, por exemplo, setTimeout.

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

Por isso, eu tentei as respostas acima, muitas não funcionam na versão mais recente do Angular (6 ou posterior)

Estou usando o controle de material que exigiu alterações após a primeira ligação.

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

Adicionando minha resposta, isso ajuda alguns a resolver problemas específicos.

O artigo Tudo o que você precisa saber sobre o ExpressionChangedAfterItHasBeenCheckedErrorerro explica o comportamento em grandes detalhes.

O problema com a configuração é que ngAfterViewInito gancho do ciclo de vida é executado após as atualizações do DOM processadas pela detecção de alterações. E você está efetivamente alterando a propriedade usada no modelo neste gancho, o que significa que o DOM precisa ser renderizado novamente:

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

e isso exigirá outro ciclo de detecção de alterações e o Angular, por design, executa apenas um ciclo de resumo.

Você basicamente tem duas alternativas para corrigi-lo:

• atualizar a propriedade de forma assíncrona ou usando setTimeout, Promise.thenou assíncrono observável referenciada no modelo

• execute a atualização da propriedade em um gancho antes da atualização do DOM - ngOnInit, ngDoCheck, ngAfterContentInit, ngAfterContentChecked.

Você só precisa atualizar sua mensagem no gancho do ciclo de vida correto, neste caso, é em ngAfterContentCheckedvez de ngAfterViewInit, porque em ngAfterViewInit, uma verificação da mensagem variável foi iniciada, mas ainda não foi encerrada.

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

então o código será apenas:

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 :)'
  }      
}

veja a demonstração de trabalho no Plunker.

Este erro está ocorrendo porque o valor existente está sendo atualizado imediatamente após a inicialização. Portanto, se você atualizar um novo valor depois que o valor existente for renderizado no DOM, ele funcionará bem.Como mencionado neste artigo Depuração angular "A expressão foi alterada após a verificação"

por exemplo, você pode usar

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

}

ou

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

Como você pode ver, não mencionei o tempo no método setTimeout. Como é uma API fornecida pelo navegador, não uma API JavaScript, portanto, isso será executado separadamente na pilha do navegador e aguardará até que os itens da pilha de chamadas sejam concluídos.

Como o conceito de API do navegador é explicado por Philip Roberts em um dos vídeos do Youtube (o que o hack é o loop de eventos?).

Você também pode fazer sua chamada para updateMessage () no método ngOnInt () -, pelo menos funciona para mim

ngOnInit() {
    this.updateMessage();
}

No RC1, isso não aciona a exceção

Você também pode criar um timer usando a Observable.timerfunção rxjs e atualizar a mensagem na sua assinatura:                    

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

Ele gera um erro porque seu código é atualizado quando ngAfterViewInit () é chamado. Significa que seu valor inicial foi alterado quando o ngAfterViewInit ocorre. Se você chamar isso em ngAfterContentInit () , ele não emitirá um erro.

ngAfterContentInit() {
    this.updateMessage();
}

Não pude comentar no post de @Biranchi, já que não tenho reputação suficiente, mas isso resolveu o problema para mim.

Uma coisa a notar! Se a adição de changeDetection: ChangeDetectionStrategy.OnPush no componente não funcionou, e é um componente filho (componente burro), tente adicioná-lo também ao pai.

Isso corrigiu o bug, mas eu me pergunto quais são os efeitos colaterais disso.

Eu recebi um erro semelhante ao trabalhar com a tabela de dados. O que acontece é quando você usa * ngFor dentro de outra * ngFor a tabela de dados lança esse erro à medida que intercepta o ciclo de alterações angulares. Portanto, em vez de usar a tabela de dados dentro da tabela de dados, use uma tabela regular ou substitua mf.data pelo nome da matriz. Isso funciona bem.

Eu acho que uma solução mais simples seria a seguinte:

1. Faça uma implementação de atribuir um valor a alguma variável, por exemplo, através da função ou setter.
2. Crie uma variável de classe (static working: boolean)na classe em que essa função existe e toda vez que você chamar a função, simplesmente faça com que ela seja verdadeira como desejar. Dentro da função, se o valor do trabalho for verdadeiro, basta retornar imediatamente sem fazer nada. caso contrário, execute a tarefa desejada. Altere essa variável para false assim que a tarefa for concluída, ou seja, no final da linha de códigos ou dentro do método de inscrição, quando terminar de atribuir valores!