チェックされた後、式___が変更されました

この単純なプランクのコンポーネントはなぜですか

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

投げ：

例外：式 'I'm {{message}} in App @ 0：5'は確認後に変更されました。以前の値： 'I'm loading :('。現在の値： 'I'm all done loading :)' in [I'm {{message}} in App @ 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アプローチを示すPlunkersもここにあります。

まず、この例外は、アプリを開発モードで実行している場合にのみスローされることに注意してください（ベータ-0以降のデフォルトです）：enableProdMode()アプリをブートストラップするときに呼び出しても、スローされません（を参照）更新されたプランク）。

第二に、それをしないでくださいこの例外は正当な理由でスローされため、これを、開発モードでは、変更検出のすべてのラウンドの直後に、最初のラウンドの終了以降にバインディングが変更されていないことを確認する2番目のラウンドが続きます。これは、変更が変更検出自体によって引き起こされていることを示します。

プランクでは、最初の変更検出ターンの一部として発生するフックで発生{{message}}するへの呼び出しによってバインディングが変更されます。それ自体は問題ありませんが、問題はsetMessage()ngAfterViewInitsetMessage()バインディング変更しますが、新しいラウンドの変更検出をトリガーしないことです。つまり、今後のラウンドの変更検出がどこかでトリガーされるまで、この変更は検出されません。

要点：バインディングを変更するものはすべて、変更時に一連の変更検出をトリガーする必要があります。

これを行う方法の例についてのすべての要求に応じて更新します。@ MarkRajcokが指摘した回答の 3つのメソッドと同様に、@ Tychoのソリューションが機能します。しかし率直に言って、ng1に頼っていたハックのように、それらはすべて私にとって醜く間違っていると感じています。

確かに、これらのハッキングが適切である状況は時々ありますが、ごくまれにしか使用していない場合は、フレームワークとの反応性を完全に受け入れるのではなく、フレームワークと戦っていることを示しています。

IMHO、これにアプローチするより慣用的な「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の設計では1つのダイジェストサイクルのみが実行されます。

基本的に、それを修正する方法は2つあります。

• 非同期プロパティを更新のいずれかを使用してsetTimeout、Promise.thenまたはテンプレートで参照非同期観測可能

• DOM更新の前にフックでプロパティ更新を実行します-ngOnInit、ngDoCheck、ngAfterContentInit、ngAfterContentChecked。

適切なライフサイクルフックでメッセージを更新する必要があります。この場合はngAfterContentChecked、ngAfterViewInitngAfterViewInitで変数メッセージのチェックが開始されましたが、まだ終了していないため。

参照：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でレンダリングされた後に新しい値を更新する場合、それは正常に機能します。

例えばあなたは使うことができます

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

}

または

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

ご覧のとおり、setTimeoutメソッドで時間について言及していません。これはJavaScript APIではなくブラウザ提供のAPIであるため、ブラウザスタックで個別に実行され、コールスタックアイテムが完了するまで待機します。

どのようにブラウザーAPIがコンセプトを呼び起こすかは、Youtubeのビデオの1つでフィリップロバーツによって説明されています（ハックとはイベントループとは何ですか？）。

ngOnInt（）-メソッドにupdateMessage（）への呼び出しを置くこともできます。少なくともそれは私にとっては機能します

ngOnInit() {
    this.updateMessage();
}

RC1では、これは例外をトリガーしません

rxjs Observable.timer関数を使用してタイマーを作成し、サブスクリプションのメッセージを更新することもできます。                    

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

ngAfterViewInit（）が呼び出されるとコードが更新されるため、エラーがスローされます。ngAfterViewInitが行われたときに初期値が変更されたことを意味します。それをngAfterContentInit（）で呼び出した場合、エラーはスローされません。

ngAfterContentInit() {
    this.updateMessage();
}

私は十分な評判がないので@Biranchiの投稿にコメントできませんでしたが、問題は解決しました。

注意すべき1つのこと！コンポーネントにchangeDetection：ChangeDetectionStrategy.OnPushを追加しても機能せず、その子コンポーネント（ダムコンポーネント）を親にも追加してみてください。

これでバグは修正されましたが、これの副作用は何でしょうか。

データテーブルでの作業中に同様のエラーが発生しました。* ngForを別の* ngForデータテーブル内で使用すると、角度変更サイクルが干渉するため、このエラーがスローされます。SOデータテーブル内でデータテーブルを使用する代わりに、1つの通常のテーブルを使用するか、mf.dataを配列名に置き換えます。これは正常に動作します。

私は最も簡単な解決策は次のようになると思います：

1. 関数またはセッターを介して、変数に値を割り当てる実装を1つ作成します。
2. (static working: boolean)この関数が存在するクラスにクラス変数を作成し、関数を呼び出すたびに、好きなだけtrueにします。関数内で、workingの値がtrueの場合は、何もせずにすぐに戻ります。それ以外の場合は、必要なタスクを実行します。タスクが完了したら、つまり、コードの行の最後で、または値の割り当てが完了したらsubscribeメソッド内で、この変数を必ずfalseに変更してください。