angular – 为什么我的属性不在“范围”内更新？

发布时间：2020-12-17 16:57:01 所属栏目：安全来源：网络整理

导读：我开始冒险进入Angular2做一个爱好项目,并遇到了一些我不知道如何调试或搜索的东西. 我开始使用ng2-play存储库. 我有两个简单的类(这个代码大大简化了这篇文章)：也就是说,ui.js export class WordsUI { constructor() { new Words(data = this.words = dat

我开始冒险进入Angular2做一个爱好项目,并遇到了一些我不知道如何调试或搜索的东西.

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

我有两个简单的类(这个代码大大简化了这篇文章)：

也就是说,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()));
  }
}

唯一不能正常工作的是“范围”,认识到属性词的值已经更新.这意味着当UI加载时,单词列表中不会显示任何内容.如果我然后通过UI向列表添加单词,则所有单词加上添加的单词都会显示出来.或者,如果我输入一个setTimeout来“重新加载”单词属性,并显示它自己的值.

我想我没有使用正确的模式,但我会在哪里找出哪种模式对这种情况更好.我在新的ES6模块系统中有点迷失：TypeScript和AngularJS 2.

我想我提供了代码的相关部分来说明问题,但如果没有,请告诉我,我可以努力将更好的东西组合在一起.

更新1：添加了视图文件.对WordsUI实例的“上下文”中的单词的更改没有反映出来.

解决方法

所以我找到了一个答案 – 或者根据你的观点解决这个问题 – 在最初遇到它之后几个小时.这个爱好项目的最终存储库是 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;
        })
  }
}

也就是说,data.js

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!