Question

我正在使用chgrp开发聊天应用程序。为了得到聊天，我尝试了下面的方法

控制器代码：

Angular2, ionic2 and firebase

查看代码：

displayAllMessage() {
    let myDataRef = new Firebase("firbaseurl");
    myDataRef.on('child_added', function(snapshot) {
      this.message = snapshot.val();
      console.log(this.message);
    });
  }

但问题在于 - 如果我使用<h1> {{message.text}} </h1>，则会抛出错误，指出this.message未定义，如果我使用this.message而不是var message那么它可以正常工作。如果我使用this，那么我就无法在视图中显示它。

提前谢谢你。

Answer 1

使用箭头功能() => { ... }代替function () { ... }来保留this.的范围

  displayAllMessage() {
    let myDataRef = new Firebase("firbaseurl");
    myDataRef.on('child_added', (snapshot) => {
      this.message = snapshot.val();
      console.log(this.message);
    });
  }

另见https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Functions/Arrow_functions

  displayAllMessage() {
    let myDataRef = new Firebase("firbaseurl");
    myDataRef.on('child_added', function (snapshot) {
      this.message = snapshot.val();
      console.log(this.message);
    }.bind(this));
  }

Answer 2

相同情况另一种情况，它是(this)的问题。由于您的this将引用回调函数的上下文

...function(snapshot) {
      this.message = snapshot.val();
      console.log(this.message);
    });

它无法找到变量消息。解决方案是将引用（this）传递给外部方法，然后在回调中访问它。所以你的代码看起来像。

displayAllMessage(parentRef : any) {
    let myDataRef = new Firebase("firbaseurl");
    myDataRef.on('child_added', function(snapshot) {
      parentRef.message = snapshot.val();
      console.log(parentRef.message);
    });
  }

并调用该方法 displayAllMessage(this);代替displayAllMessage();

Firebase child_added`this`无效

2 个答案: