2016-09-01 12 views
2

私はthisビデオをフォローしています。しかし、私はそれを実装するのに問題があります。これはHTMLファイルです。AngularFireはFirebaseデータベースのデータを表示しません

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>Welcome to Firebase Hosting</title>   
     <!-- AngularJS --> 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> 

     <!-- AngularFire --> 
     <script src="https://cdn.firebase.com/libs/angularfire/2.0.2/angularfire.min.js"></script> 

     <!-- Firebase --> 
     <script src="https://www.gstatic.com/firebasejs/3.3.0/firebase.js"></script>   

     <script src="app.js"></script> 
    </head> 
    <body ng-app="app"> 
    <div id="message" ng-controller="MyController as ctrl"> 
     <pre> 
{{ ctrl.object | json }} 
      </pre> 
    </div> 
    </body> 
</html> 

これは私のapp.jsファイルです。

(function(){ 

     // Initialize Firebase 
     var config = { 
       apiKey: "SOME KEY", 
       authDomain: "tier2list.firebaseapp.com", 
       databaseURL: "https://tier2list.firebaseio.com", 
       storageBucket: "", 
     }; 
     firebase.initializeApp(config); 

     angular.module('app', ['firebase']).controller('MyController', function($firebaseObject){ 
       const rootRef = firebase.database().ref().child('tier2list'); 
       const ref = rootRef.child('object'); 
       this.object = $firebaseObject(ref); 
     }); 

}()); 

これは私のデータベース構造です。 enter image description here

しかし、結果は次のとおりです。

enter image description here

し、同様に、コンソールにはエラーはありません。データベースのルールは次のとおりです。

{ 
    "rules": { 
    ".read": true, 
    ".write": true 
    } 
} 
+0

は、あなたのデータベースがどのように見えるかを私たちに示していることはできますか?データベース内に「オブジェクト」の子がない可能性があるので、nullが返されるのは理にかなっています。何かに影響を与えるべきではないが、あなたのストレージバケツがあなたの設定で空であるということです。それは既知のfirebaseのバグです。戻って設定をもう一度取得すると、表示されるはずです。 –

+0

データベース構造を追加しました。 – Isuru

+0

スクリプトの順序が正しく表示されません。 FirebaseはAngularFireの前にあるはずです:https://github.com/firebase/angularfire#downloading-angularfire – cartant

答えて

2

問題は、同期パスである:あなたは空のオブジェクトを取得しますので

const rootRef = firebase.database().ref().child('tier2list'); 

は、データベース内の子tier2listはありません。フランクは答えたとき、私はこれの真ん中にあった

const rootRef = firebase.database().ref() 
+0

これはうまくいきました。あなたは@フランクを揺らす。 – Isuru

1

代わりに、あなたはであなたが行うことができ、データベース全体を同期しようとしています。彼は正しい答えを持っていますが、ここでは、データベースはダビデのコードを使用するためにどのように見えるかです:それは少し混乱することができるようを通して彼徒歩で enter image description here

、彼は、すでにangularノードの内側にあります。

私はまた、誰もがトラブル彼ら自身のためにそれを行うことをしている場合には、プロジェクトのためのGitHubリポジトリを作成しました: https://github.com/LukeSchlangen/angularFireQuickDemo

関連する問題