角2部品のモデル変更があるかどうかをチェック

Question

まず、私のコードが動作しています。この質問は、私が適切なことをしているかどうかと、私が角2の力を使っているかどうかについてです。角1から来て、角2の中心概念をまだ学んでいます。

レッツ・スタート：

は角2アプリ（RC.4）私はビューとしてカレンダーをレンダリングカレンダーコンポーネントを持っていると考えます。 APIレストコールの結果に応じて、各カレンダーの日は「装飾された」RED（ビジー）またはGREEN（フリー）です。特定の日のデータがない場合、その日は全くデコレーションされません。

したがって、カレンダーの@componentには以下のObservableがあります。解決されると、コンポーネント「エントリ」のプロパティが応答で埋められます。 （レスポンスは、 "dayStatus"プロパティがbusy/greenに設定された曜日オブジェクトの配列です）。

ngOnInit() { 
     this.calendarService.getAll().subscribe(
      response => { 
       this.entries = response.json(); 
      } 
     ); 
    } 

カレンダーテンプレートはdecorateDay（）ハンドラに解決ngClassあります。それはを通じて緑または赤に装飾されなければならない場合ので、宣言的な方法に見えます、

<span class="day" *ngFor="let day of week.days" 
     [ngClass]="decorateDay(day)"> 
     {{ day.number }} 
</span> 

すべて「一日」ハンドラdecorateDay（日）。 以下のように動作します。「day」がパラメータとして渡され、JSON配列から関連オブジェクトを取得するためのキーとして使用されます。オブジェクトプロパティから、緑色/赤色の文字列がビューに渡され、ngClassを使用してCSSで飾られます。

decorateDay(day) { 

     let dayFormatted = day.date.format("YYYY-MM-DD"); 

     //when observable was resolved entries is not undefined. 
     if (typeof this.entries !== 'undefined') { 
      let data = this.entries[dayFormatted]; 
      if (typeof data !== 'undefined') { 
       return data.dayStatus; 
      } 
     } 
    } 

そして、ここに私の質問は来る：「エントリは」そう定義されていない場合、私は、ハンドラでチェック定義されるとき、私は知りません。エントリにコンポーネントが入力されたときのように見えます魔法のようにハンドラを再度確認してください（変更検出による）。私はそれで大丈夫ですが、コンポーネントのプロパティが変更されたときには、より良いチェック方法はありませんか？たぶんプロパティを@resolvedで飾るか、ライフサイクルフックを使って..？私はそれをやっている方法が好きではありません！

あなたの中には、いくつかの参考になれば幸いです。前もって感謝します！

PS：モデルプロパティとのバインディングはテンプレート自体で行うことができますが、今後どのように特定の日を飾るかについてより柔軟になるため、ハンドラを使用したいと思います。

Answer 1

私はあなたの質問を誤解するかもしれませんが、これは私があなたが探しているものです。

ngOnInit() { 
    this.calendarService.getAll().subscribe(
     response => { 
      this.entries = response.json(); 
      // >>> here you know that `entries` was updated 
      // just invoke what you want to be executed when `entries` has changed 
     } 
    ); 
}