Выражение ___ изменилось после проверки

Почему компонент в этом простом панке

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

метание:

ИСКЛЮЧЕНИЕ: выражение «Я {{message}} в приложении @ 0: 5» изменилось после того, как оно было проверено. Предыдущее значение: «Я загружаю :(». Текущее значение: «Я все загрузил :)» в [I'm {{message}} в приложении @ 0: 5]

когда все, что я делаю, это обновление простой привязки, когда мое представление инициируется?

Как утверждает drewmoore, правильным решением в этом случае является ручное инициирование обнаружения изменений для текущего компонента. Это делается с помощью detectChanges()метода ChangeDetectorRefобъекта (импортированного из angular2/core) или его markForCheck()метода, который также обновляет все родительские компоненты. Соответствующий пример :

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

}

Вот также Плункеры, демонстрирующие подходы ngOnInit , setTimeout и enableProdMode на всякий случай.

Во-первых, обратите внимание, что это исключение будет сгенерировано только при запуске приложения в режиме разработки (что имеет место по умолчанию в бета-0): если вы вызываете enableProdMode()при загрузке приложения, оно не будет выброшено ( см. обновленный план ).

Во-вторых, не делайте этого, потому что это исключение вызывается по уважительной причине: короче говоря, когда в режиме разработки, каждый раунд обнаружения изменений сопровождается сразу же вторым раундом, который проверяет, что с конца первого не изменились привязки, поскольку это указывает на то, что изменения вызваны самим обнаружением изменений.

В вашем соединении привязка {{message}}изменяется вашим вызовом setMessage(), что происходит в ngAfterViewInitловушке, которая происходит как часть начального хода обнаружения изменений. Это само по себе не является проблемой - проблема в том, что setMessage()изменяет привязку, но не запускает новый раунд обнаружения изменений, а это означает, что это изменение не будет обнаружено, пока какой-то будущий раунд обнаружения изменений не будет запущен где-то еще.

Вывод: все, что изменяет привязку, должно инициировать раунд обнаружения изменений, когда это происходит.

Обновите в ответ на все запросы пример того, как это сделать : решение @ Tycho работает, как и три метода в ответе @MarkRajcok. Но, честно говоря, все они мне кажутся уродливыми и неправильными, вроде тех хаков, к которым мы привыкли опираться в ng1.

Конечно, есть случайные обстоятельства , при которых эти писаки подходящие, но если вы используете их на что - нибудь более чем очень эпизодически, это признак того, что вы сражаетесь рамки , а не полностью охватывает его реактивную природу.

ИМХО, более идиоматический, "Angular2 способ" подхода к этому - что-то вроде: ( 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() работал на меня:

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

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

Я исправил это, добавив ChangeDetectionStrategy из углового ядра.

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

Вы не можете использовать, ngOnInitпотому что вы просто меняете переменную-член message?

Если вы хотите получить доступ к ссылке на дочерний компонент @ViewChild(ChildComponent), вам действительно нужно ждать ее ngAfterViewInit.

Грязное исправление - вызвать updateMessage()в следующем цикле событий, например, setTimeout.

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

Для этого я попробовал выше ответы, многие из которых не работает в последней версии Angular (6 или более поздняя версия)

Я использую Контроль материала, который требует изменений после первого связывания.

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

Добавление моего ответа так, это помогает некоторым решить конкретную проблему.

В статье все, что нужно знать об ExpressionChangedAfterItHasBeenCheckedErrorошибке подробно объясняет поведение.

Проблема с вашей настройкой заключается в том, что ngAfterViewInitловушка жизненного цикла выполняется после обнаружения изменений, обрабатываемых обновлениями DOM. И вы эффективно меняете свойство, используемое в шаблоне в этом хуке, что означает, что DOM необходимо перерисовать:

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

и это потребует еще одного цикла обнаружения изменений, а Angular по конструкции выполняет только один цикл дайджеста.

У вас есть два варианта, как это исправить:

• обновлять свойство асинхронно либо используя setTimeout, Promise.thenлибо асинхронно наблюдаемую, указанную в шаблоне

• выполнить обновление свойства в хуке перед обновлением DOM - ngOnInit, ngDoCheck, ngAfterContentInit, ngAfterContentChecked.

Вам просто нужно обновить ваше сообщение в правильном хуке жизненного цикла, в этом случае ngAfterContentCheckedвместо ngAfterViewInit, потому что в ngAfterViewInit проверка переменной сообщения была начата, но еще не закончена.

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

поэтому код будет просто:

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

посмотрите рабочую демонстрацию на Plunker.

Эта ошибка возникает, потому что существующее значение обновляется сразу после инициализации. Поэтому, если вы обновите новое значение после того, как существующее значение будет отображено в DOM, тогда оно будет работать нормально. Как упоминалось в этой статье, Angular Debugging «Выражение изменилось после того, как оно было проверено»

например, вы можете использовать

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

}

или

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

Как видите, я не упомянул время в методе setTimeout. Так как это API, предоставляемый браузером, а не API JavaScript, поэтому он будет работать отдельно в стеке браузера и будет ждать завершения элементов стека вызовов.

Как объясняет концепцию API браузера Филип Робертс в одном из видеороликов Youtube («Что такое взлом цикла обработки событий?»).

Вы также можете поместить свой вызов updateMessage () в метод ngOnInt (), по крайней мере, он работает для меня

ngOnInit() {
    this.updateMessage();
}

В RC1 это не вызывает исключения

Вы также можете создать таймер с помощью Observable.timerфункции rxjs , а затем обновить сообщение в вашей подписке:                    

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

Это выдает ошибку, потому что ваш код обновляется при вызове ngAfterViewInit () . Означает, что ваше начальное значение изменилось, когда ngAfterViewInit имеет место. Если вы вызываете это в ngAfterContentInit (), то это не выдаст ошибку.

ngAfterContentInit() {
    this.updateMessage();
}

Я не могу комментировать пост @Biranchi, так как у меня недостаточно репутации, но это исправило проблему для меня.

Стоит отметить одну вещь! При добавлении changeDetection: ChangeDetectionStrategy.OnPush для компонента не работает, и его дочерний компонент (немой компонент), попробуйте добавить его и к родительскому компоненту.

Это исправило ошибку, но мне интересно, каковы побочные эффекты этого.

Я получил аналогичную ошибку при работе с данными. То, что происходит, когда вы используете * ngFor внутри другого * ngFor datatable, генерирует эту ошибку, поскольку она перехватывает цикл угловых изменений. Поэтому вместо использования данных внутри данных используйте одну обычную таблицу или замените mf.data именем массива. Это отлично работает.

Я думаю, что самое простое решение будет следующим:

1. Сделайте одну реализацию присвоения значения некоторой переменной, то есть через функцию или установщик.
2. Создайте переменную класса (static working: boolean)в классе, где эта функция существует, и каждый раз, когда вы вызываете функцию, просто делайте ее истинной, в зависимости от того, что вам нравится. Внутри функции, если значение работает верно, тогда просто вернитесь сразу, ничего не делая. иначе, выполняйте задание, которое вы хотите. Обязательно измените эту переменную на false, как только задача будет завершена, т.е. в конце строки кодов или в методе подписки, когда вы закончите присваивать значения!