从 Firebase 检索数据时，angular-2(beta) 视图未更新？答案

【问题标题】：angular-2(beta) view is not updating when retrieving data from Firebase?从 Firebase 检索数据时，angular-2(beta) 视图未更新？
【发布时间】：2016-11-04 21:04:30
【问题描述】：

下面的代码显示我正在从 Firebase 检索数据，同时我正在使用绑定语法更新我的视图。数据已成功检索，我已在控制台中打印，但我的视图更新非常缓慢。我已经在index.html初始化了我的Firebase。谁能解释一下实际上是什么问题，firebase的初始化有什么问题吗？

在控制台上出现此错误angular2-polyfills.js:493 Uncaught TypeError: fnRef.apply is not a function

提前咨询

`index.html`

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

组件

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

         }         
            }
         });                
      }

查看

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

【问题讨论】：

您期望的数据是否显示在页面上，或者您是否收到代码指示的错误？
是的，我希望数据显示在我的页面上。我没有收到任何错误
正如我提到的，我正在从 db 中检索数据，但是一旦数据从 firebase 到达，我的 html 就不会更新。你有什么想法请帮助我@TeddySterne
简单生活，用github.com/angular/angularfire2
我正在使用 angular-2 的 beta 版本，当 npm angularfire2 如果找到 ngmodule 时，我没有在我的应用程序中使用 ngmodule。所以我忽略了尝试它。我对 angular- 很陌生2 @Fabio Antunes。

标签： angular firebase

【解决方案1】：

如果您在 Angular 之外初始化库，则 Angular 无法识别何时需要运行更改检测。

作为一种解决方法，您可以使用zone.run(...)

同样function () ... this. 不指向当前类实例。请改用() => ...。
另见https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions

constructor(private zone:NgZone) {}

ngAfterContentInit() {
   this.singlehotel = {};
   firebase.database().ref('Rests/').once('value', (snapshot) => {
     this.zone.run(() => {
       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
         }         
       }
     });
   });                
 }

我建议你改用https://github.com/angular/angularfire2。

【讨论】：

ngzone是否需要导入
每个类型都需要在TS中导入。 import {NgZone} from '@angular/core'
感谢@gunter Zochbauer...我尝试过按预期工作。
听说在 Angular2 之前还有一个 Angular 但对此一无所知