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":"悲伤","-KzLT76T14doKgYbjRc1":"哇"}

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>

通过这种方式，您可以依靠视图来始终保持数据更新。

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

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

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