angular - 为什么我的属性没有在 "Scope"内更新？

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>

单词数据.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:添加了 View 文件。 WordsUI 实例的“上下文”上的 words 的更改不会反射(reflect)出来。

Answer 1

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

问题

我实际上是在尝试从传递给 Word 构造函数的回调中为 WordsUI 实例设置一个属性。我认为不知何故没有被拾取，而是“范围观察者”zones.js(我认为)。

决议

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

我不认为这种方法——我最终使用的方法——一定是低劣的，前者也不是真的有任何优势。

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