Question

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

在控制台上出现此错误 angular2-polyfills.js：493 Uncaught TypeError：fnRef.apply不是函数

提前tahnks

`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>

Answer 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。

从Firebase检索数据时，angular-2（beta）视图未更新？

`index.html`

成分

视图

1 个答案: