为什么我的属性没有在 "Scope" 中更新？

Question

我开始冒险进入 Angular2 进行一个业余项目，并且运行进入了一些我还不知道如何调试或搜索的东西。

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

我有两个简单的类（此代码已大大简化 post）：

字数-ui.js

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

字数-ui.html

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

字数-data.js

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

唯一还没有正常工作的是 "scope" 识别属性 words 的值已经更新。这意味着当 UI 加载时，单词列表中不会显示任何内容。如果我然后通过 UI 所有单词添加一个单词到列表，加上添加的单词，显示出来。或者，如果我将 setTimeout 放入 "reload" words 属性中，它们会显示自己的值。

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

我想我已经提供了代码的相关部分来说明问题，但如果没有请告诉我，我可以努力组合更好的东西。

更新 1：添加了视图文件。未反映 WordsUI 实例的 "context" 上对 words 的更改。

Answer 1

所以我找到了一个答案 - 或者变通，这取决于你的观点 - 在运行最初进入它后的几个小时内解决了这种情况。此爱好项目的最终存储库位于 GitHub Weekly Word。

问题

我实际上是在尝试从传递给 Word 构造函数的回调中在 WordsUI 实例上设置一个属性。我认为不知何故没有被拾起，而是 "scope watcher" zones.js（我认为）。

决议

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

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

字数-ui.js

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

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

字数-data.js

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

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

为什么我的属性没有在 "Scope" 中更新？

Why isn't my property being updated inside the "Scope"?

firebase

ecmascript-6

angular

问题

决议

为什么我的 属性 没有在 "Scope" 中更新？

Why isn't my property being updated inside the "Scope"?

firebase

ecmascript-6

angular

问题

决议

为什么我的属性没有在 "Scope" 中更新？