AngularFire 不显示来自 Firebase 数据库的数据

Question

我正在关注 this 视频。但是我在实施它时遇到了麻烦。这是 HTML 文件。

<!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);
        });

}());

这是我的数据库结构。

但是结果如下

控制台也没有错误。数据库规则如下

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

Answer 1

问题出在你同步的路径上：

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

你的数据库中没有childtier2list，所以你会得到一个空的object。

相反，您正在尝试同步整个数据库，您可以通过以下方式实现：

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

Answer 2

当 Frank 回答时，我正在讨论这个问题。他有正确的答案，但为了使用 David 的代码，您的数据库应该如下所示：

在他的遍历中，他已经在 angular 节点内部，所以这可能有点混乱。

我还为该项目创建了一个 Github 存储库，以防有人在自己制作时遇到问题： https://github.com/LukeSchlangen/angularFireQuickDemo

AngularFire 不显示来自 Firebase 数据库的数据

AngularFire doesn't show data from Firebase Database

firebase

angularfire

firebase-realtime-database