AngularJS 和 Firebase - 从数据库中获取特定值

Question

很抱歉打扰你，我已经彻底搜索了这个，但我一直在积极尝试解决这个问题超过 20 小时。我即将放弃使用 angularjs 和 firebase。就是想不通..

我正在尝试将数据库值从数组添加到页面。它适用于其他数据，但不适用于此。

我的 Firebase 数据库： 我已经包含了与 freebets 相关的代码，这些代码都很好，但 bookie 的 deatils 无法正常工作。数组中还有其他 bookie 详细信息，我也将调用它们，只是想让一个工作..

  myApp.controller('BetsController',
  ['$scope', '$rootScope', '$location', '$routeParams', '$firebaseObject', '$firebaseArray',
  function($scope, $rootScope, $location, $routeParams, $firebaseObject, $firebaseArray) {

    //Values passed throu routeparams are assigned to variables and then used to search the firebase database.

  var ref, freeBetList, test;
  $scope.whichoffer = $routeParams.oId;
  $scope.whichuser = $routeParams.uId;

  ref = firebase.database().ref()
    .child('users').child($scope.whichuser)
    .child('offers').child($scope.whichoffer)
    .child('freeBets');

  freeBetList = $firebaseArray(ref);
  $scope.freeBets = freeBetList;


  test = firebase.database().ref()
    .child('users').child($scope.whichuser)
    .child('offers');

//.child('offerbookie')
//  testing = $firebaseObject(test);
testing = $firebaseArray(test);
$scope.test = testing;

<div class="card meetings cf">
  <h2>Free Bets</h2>
  <div class="meeting" ng-repeat="(key, freeBets) in freeBets">
        <a href="#">
        <span class="text">{{freeBets.eventname}}</span>
      </a>
      <button class="btn btn-delete tooltip"
        ng-click="deleteOffer(key)"><span>Delete this offer</span></button>
      </div>
    </div>

    <div class="card meetings cf">
      <h2>Offer Details</h2>
      <div class="meeting" ng-repeat="(key, value) in test">
        <a href="#">
          <p>{{whichoffer.offerbookie}}</p>
        </a>
      </div>
    </div>

控制台日志：

[]
​
"$$added": function added()
​
"$$error": function error()
​
"$$getKey": function getKey()
​
"$$moved": function moved()
​
"$$notify": function notify()
​
"$$process": function process()
​
"$$removed": function removed()
​
"$$updated": function updated()
​
"$add": function add()
​
"$destroy": function destroy()
​
"$getRecord": function getRecord()
​
"$indexFor": function indexFor()
​
"$keyAt": function keyAt()
​
"$loaded": function loaded()
​
"$ref": function ref()
​
"$remove": remove()
​​
length: 1
​​
name: "bound $remove"
​​
__proto__: function ()
​
"$resolved": true
​
"$save": function save()
​
"$watch": function watch()
​
0: Object { date: 1529091671870, offerbookie: "Coral", offermarket: "Betfair", … }
​
1: Object { date: 1529150480309, offerbookie: "SkyBet", offermarket: "Smarkets", … }
​
length: 2
​
__proto__: Array []
bets.js:42:4

我只想显示与$scope.whichoffer 相关的一个offerbookie 值。

电流输出：

Answer 1

如果您想显示 ref 的 bookie 详细信息，请将 $firebaseArray 值直接保存到范围变量中（而不是使用另一个本地变量 testing）。编辑你的控制器代码：

$scope.test = $firebaseArray(test);

现在在成功请求后，它将拥有两个对象的数组，您可以使用 ng-repeat 在 DOM 上显示：

<div class="card meetings cf">
  <h2>Offer Details</h2>
  <div class="meeting" ng-repeat="bookie in test | filter: {'$id' : whichoffer}">
    <a href="#">
      <p>{{bookie.offerbookie}}</p>
    </a>
  </div>
</div>

在这里我改变了 ng-repeat 表达式。您使用的是循环对象属性而不是数组。

更新：

实际上，对于这种情况，您甚至不需要 ng-repeat，因为它始终是一个唯一值。虽然上面的代码可以工作，但你可以在成功响应后在$scope.test上使用纯JS的.filter方法，它仍然可以工作。