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');

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

相反，您正在尝试同步整个数据库，您可以通过以下方式执行此操作：

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

Answer 2

当弗兰克回答时，我正处于这个中间。他有正确的答案，但这是你的数据库应该是什么样子，以便使用大卫的代码：

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

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

AngularFire不会显示Firebase数据库中的数据

2 个答案: