为什么我没有从阵列中获取数据？

Question

我没有收到正确的数据。我的错是什么？

  var ref = firebase.database().ref("Entries/kategorie");
  ref.once("value")
    .then(function(snapshot) {
      $scope.tmp = snapshot.val();
      $scope.$apply(function () {
      $scope.data = $scope.tmp
      // returns what you see in the image
      console.log($scope.tmp.catname);
      // The Log statement returns ["Cat1", "Cat2", "Cat3"] so the                   array which i need. 
      })

    });

这是我回来的。

这是html

<div ng-repeat="cat in data" class="animated lightSpeedIn">
  <a nav-transition="none"><div ng-style="{'background': 'url(' + cat.bgurl + ')','background-repeat': 'no-repeat','background-size': 'cover','display': 'block','width': '100%','height': '25vh' }" class="bgcat center">
    <div class="inner">
      <h1>{{cat.catname}}</h1>
      <h4>{{cat.subtitle}}</h4>
    </div>
  </div></a>
</div>

我想cat.catname可以获得catnameurl。但这似乎是错误的......

Answer 1

你确实有一个非常“不寻常”的数据模型。但我把它留给你。根据您的数据模型，您的html应如下所示：

<div ng-repeat="bgurl in data.bgurl" class="animated lightSpeedIn">
  <a nav-transition="none"><div ng-style="{'background': 'url(' + bgurl + ')','background-repeat': 'no-repeat','background-size': 'cover','display': 'block','width': '100%','height': '25vh' }" class="bgcat center">
  <div class="inner">
    <h1>{{data.catname[$index]}}</h1>
    <h4>{{data.subtitle[$index]}}</h4>
</div>

我建议您像这样构建数据（注意：此结构不符合我在本回答中提出的HTML）

[
  {bgurl:'abc', catname:'name1', subtitle:'my first cat'},
  {bgurl:'xyz', catname:'name2', subtitle:'my second cat'}
]

Answer 2

您返回的数据格式有点不正确。正确的方法是返回对象数组

但是，你可以这样做：

<div ng-repeat="catname in data.catname" class="animated lightSpeedIn">
  <a nav-transition="none"><div ng-style="{'background': 'url(' + data.bgurl[$index] + ')','background-repeat': 'no-repeat','background-size': 'cover','display': 'block','width': '100%','height': '25vh' }" class="bgcat center">
    <div class="inner">
      <h1>{{catname}}</h1>
      <h4>{{cat.subtitle[$index]}}</h4>
    </div>
  </div></a>
</div>