angular - プロパティが「スコープ」内で更新されないのはなぜですか?

Question

私は趣味のプロジェクトのためにAngular2に挑戦し始めており、まだデバッグまたは検索する方法がわからないものに遭遇しました。

私はng2-playリポジトリを使い始めました。

私は 2 つの単純なクラスを持っています (このコードは、この投稿のために大幅に単純化されています)。

words-ui.js

export class WordsUI {
  constructor() {
    new Words(data => this.words = data);
  }
}

words-ui.html

<ol *if="words" reversed>
  <li *for="#entry of words" title="Word for week starting {{entry.date}}">{{entry.word}}</li>
</ol>

words-data.js

export class Words {
  constructor(cb) {
    firebase
      .child('words')
      .on('value', data => cb(data.val()));
  }
}

まだ正しく機能していないのは、プロパティの値wordsが更新されたことを認識する「スコープ」だけです。これは、UI がロードされたときに、単語のリストに何も表示されないことを意味します。次に、UI を介してリストに単語を追加すると、すべての単語と追加された単語が表示されます。または、setTimeout を入れてwordsプロパティを独自の値で「リロード」すると、それらが表示されます。

これには正しいパターンを使用していないと思いますが、この状況にどのパターンが適しているかはどこでわかりますか。TypeScript と AngularJS 2 だけでなく、新しい ES6 モジュール システムについても少し迷っています。

問題を説明するためにコードの関連部分を提供したと思いますが、そうでない場合はお知らせください。より良いものをまとめることができます。

更新 1: ビュー ファイルを追加しました。wordsインスタンスの「コンテキスト」への変更WordsUIは反映されません。