使用它时无法在 angular-2 中设置 null 的属性？答案

【问题标题】：Cannot set property of null in angular-2 when using this?使用它时无法在 angular-2 中设置 null 的属性？
【发布时间】：2016-11-02 09:58:31
【问题描述】：

您好，我遇到了一个错误

angular2-polyfills.js:143 Uncaught TypeError: Cannot set property 'singlehotel' of null(...)

以及来自 Firebase 的警告

FIREBASE 警告：用户回调引发了异常。 TypeError：无法设置属性“singlehotel”为空

当我尝试从 Firebase 获取数据时出现此错误，请任何人帮助解决此问题。

提前致谢！

这是我的代码

ngAfterContentInit() {

       this.singlehotel = {};
       firebase.database().ref('Rests/').once('value', function(snapshot) {
         console.log('value from db' + JSON.stringify(snapshot.val()));
         var getrest = snapshot.val();
         console.log(JSON.stringify(getrest));

           for (var key in getrest) {

                  if(restemail == getrest[key].email){

          console.log(key + ':' + JSON.stringify(getrest[key]));
                          this.singlehotel = getrest[key]; //getting error here when using this

         }         
            }
         });                
      };

index.html

<script src="https://www.gstatic.com/firebasejs/3.5.1/firebase.js"></script>
    <script>
      // Initialize Firebase
      // for security reasons i am hiding my keys 
      var config = {
        apiKey: "***",
        authDomain: "***",
        databaseURL: "***",
        storageBucket: "**",
        messagingSenderId: "**"
      };
      firebase.initializeApp(config);
    </script>
       <body>
      <my-app>Loading...</my-app>
    </body>

查看

<div class="container" style="background-color: #f2f2f2;">
    <h1><b>Hotel Name :{{singlehotel.displayName}}</b></h1>
</div>

两者都属于同一个组件。当视图被加载时，每次都会调用 ngAfterContentInit() 函数，这就是函数触发的方式，但我无法在范围内存储我的意思是这个。请帮助我

【问题讨论】：

标签： angular firebase firebase-realtime-database

【解决方案1】：

如果您使用function() {... }，this 不会指向当前类实例。改用箭头函数

firebase.database().ref('Rests/').once('value', (snapshot) => {

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

【讨论】：

感谢它解决了问题，但即使数据从 firebase 到达后，视图也没有更新。它在大约 10-13 秒后得到更新。我想在数据从 firebase 到达后不久更新视图。谢谢！
你在哪里初始化firebase？听起来它在 Angulars 区域之外运行。如果无法通过在 Angular 中初始化 firebase 来解决此问题，您可以使用 zone.run(...) 使 firebase 调用的代码（传递给 firebase 的回调，如事件处理程序）在 Angulars 区域内再次执行或调用 ChangeDetectorRefs detectChanges()属性已更新。
我已经在 index.html 中初始化了我的 firebase。我没明白你到底在说什么？数据正在从 firebase 中检索，我也打印在控制台上。
Angular2 使用 zone.js 来确定何时必须运行更改检测。在 Angulars 区域之外运行的代码会阻止 Angular 识别这一点。作为解决方案，您必须在 Angular 中初始化您的 firebase 库以使其在 Angulars 区域内运行，或者自己调用更改检测。
谢谢您的回复！我明白了这个问题。实际上我对 angular-2 很陌生，你能告诉我如何在 Angular 中初始化你的 firebase 库以使其在 Angulars 区域内运行吗？如果你需要我将分享我初始化我的 firebase 的索引文件。