为什么我的财产未在“合并范围”内更新？

Question

我开始冒险参加Angular2的一个业余项目，遇到了我不知道如何调试或搜索的内容。

我开始使用ng2-play储存库。

我有两个简单的类（本文中的代码已大大简化）：

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具有其自身值的属性，则会显示它们。

我想我没有为此使用正确的模式，但是在哪里可以找到哪种模式更适合这种情况。我对新的ES6模块系统以及TypeScript和AngularJS 2感到迷茫。

我想我已经提供了代码的相关部分来说明问题，但如果没有，请告诉我，我将继续努力以取得更好的结果。

更新1：添加了视图文件。words对WordsUI实例的“上下文” 所做的更改不会反映出来。

Answer 1

因此，在最初遇到这种情况几个小时后，我找到了答案 - 或者解决方法，具体取决于您的观点。这个爱好项目的最终存储库位于GitHub Weekly Word上。

问题

我本质上是试图从传递给 Word 构造函数的回调中设置 WordsUI 实例的属性。我认为不知何故，这不是被拾取的，而是“范围观察者” zones.js（我认为）。

决议

我将数据的读取从 Word 实例转移到该实例的后续调用中；而不是试图狡猾并将其保留在传递给构造函数的回调中。

我不认为这种方法——我最终使用的方法——一定是劣等的，以前的方法也不是真正的优越者。

单词-ui.js

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

  update() {
    this.words
        .read(words => {
            this.wordList = words;
        })
  }
}

单词数据.js

export class Words {
  constructor() {
    firebase = new Firebase('http://weekly-word.firebase.com').child('words');
  }

  read(cb) {
    firebase
        .on('value', data => {
            cb(data);
        })
  }
}