Angular 2 构造函数 ngOnInit 未定义属性 TypeScript

Question

我正在尝试从 (Firebase) 数据存储返回的数据中初始化对象的值。我可以看到正在返回的数据，但我无法将其分配给局部变量。我正在自学 TypeScript、Angular 2 和 Firebase，所以这可能是一个“duh”问题......

import ProfileProvider from ../providers/profile

@Component({...})
class Profile {
userProfile:any

constructor (public profileProvider: ProfilePRovider) {}

ngOnInit() {
  this.profileProvider.getUSerProfile().on ("value", function(snap) { 
    console.log(snap.val()); // this works, prints all my data correctly
    this.userProfile = snap.val(); // this fails, "cannot set property userProfile of undefined"
   }
 }
}

感谢任何帮助！ 谢谢！

Answer 1

这是因为this 不引用组件本身。要么绑定函数，要么使用fat arrow =>函数：

...getUserProfile().on('value', function(snap){
  }.bind(this))

或

...getUserProfile().on('value', snap => {
  // this is properly bound here
  });