AngularJS AngularFire Firebase 无法迭代 Firebase 数据

Question

我在我的 AngularJS 项目中使用 AngularFire。在下面的 HTML 中，您可以看到我正在将 quote 项传递到控制器中的 total_votes 函数。

    <div ng-repeat="quote in quotes" ng-init="total_votes(quote)">
        {{quote.name}}
    </div>

这是quotes的来源

    // get quotes
    var ref = firebase.database().ref().child('quotes');
    $scope.quotes_obj = $firebaseObject(ref);
    $rootScope.quotes = $firebaseArray(ref);

这就是函数的样子

    $scope.total_votes = function(itm) {
        console.log(itm.votes)
        console.log(itm.votes)
        console.log(itm.votes[0])
        console.log(itm.votes.length)
    };

这是打印的内容

console.log(itm.votes)

    {
      "quote": "untitled",
      "recorded_by": "-KzFkQYHWKwbAPjIekWz",
      "votes": {
        "-KzFkQYHWKwbAPjIekWz": "sad",
        "-KzLT76T14doKgYbjRc1": "wow"
      },
      "who": "null",
      "$id": "-KzKz7EyCSPkPl0YDvfa",
      "$priority": null,
      "$$hashKey": "object:15"
    }

console.log(itm.votes) {"-KzFkQYHWKwbAPjIekWz":"sad","-KzLT76T14doKgYbjRc1":"wow"}

console.log(itm.votes[0]) 未定义

console.log(itm.votes.length) 未定义

如何遍历引用中的选票？为什么长度未定义？为什么我不能通过像 itm.votes[0] 这样的索引访问单个项目？

Answer 1

请记住 $firebaseObject() 和 $firebaseArray() 是异步的。您必须等待数据通过网络下载。虽然这通常不会花很长时间，但这仍然意味着它不会立即可用。

由于 AngularJS 的脏检查系统，您看到数据出现在您的视图中。当数据可用时 Angular 自动填充视图，因为它知道 $scope 上的值。

I've written about this in a blog post and done a screencast covering it as well.

您可以使用 ng-repeat 迭代视图中的数据。

<div ng-repeat="item in items">
  {{ item }}
</div>

这样您就可以依靠视图始终保持数据更新。

在你的情况下，这会很棘手，因为你的 "votes" 嵌套在你的 "quotes" 中。我强烈建议将 "votes" 分解为它们自己的顶级数据结构。为了保持关系，您可以在他们之间共享密钥。

{
  "quotes": {
     "a": {
        "name": "A"
     }
  },
  "votes": {
     "a": {
        "count:" 11
     }
  }
}

或者，您可以使用路由器解析来解析使用 $loaded 承诺的数据。博客 post 涵盖了哪些内容。

AngularJS AngularFire Firebase 无法迭代 Firebase 数据

AngularJS AngularFire Firebase Cant iterate over firebase data

angularjs

firebase

angularfire

firebase-realtime-database