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

【问题标题】：AngularFire doesn't show data from Firebase DatabaseAngularFire 不显示来自 Firebase 数据库的数据
【发布时间】：2016-09-01 10:40:53
【问题描述】：

我正在关注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
  }
}

【问题讨论】：

你能告诉我们你的数据库是什么样的吗？看起来您的数据库中可能没有“对象”子级，因此返回 null 是有意义的。最后一件事不应该影响任何事情但不好的是您的存储桶在您的配置中是空的。这是一个已知的 firebase 错误。如果您返回并再次获取配置，它应该会显示出来。
我添加了数据库结构。
脚本顺序看起来不对。 Firebase 应该在 AngularFire 之前：github.com/firebase/angularfire#downloading-angularfire
我改变了它，但我仍然得到相同的 json。 { "$id": "object", "$priority": null, "$value": null }

标签： firebase firebase-realtime-database angularfire

【解决方案1】：

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

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

您的数据库中没有子tier2list，因此您将获得一个空对象。

相反，您正在尝试同步整个数据库，您可以这样做：

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

【讨论】：

【解决方案2】：

当弗兰克回答时，我正处于这之中。他有正确的答案，但是为了使用 David 的代码，您的数据库应该是这样的：

在他的演练中，他已经在 angular 节点内，所以这可能有点令人困惑。

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

【讨论】：