无法使用Firebase和AngularJS创建链接承诺，FirebaseArray具有两个连续调用以从两个不同的表链接获取数据 [英] Can't create a chaining promise with firebase and AngularJS, a FirebaseArray with two sequential calls to fetch data from two different tables linked

问题描述

我有以下两个服务和类别表：

   -  servicecat 
  -  catid 
 -  name：Category Name
  -  services 
  -  srvid1：true 
  -  srvid2：true 
  -  srvid3：true 
  -  services 
  -  srvid 
  -  name：Service Name
  -  Details：blabla
  -  servicecat：
  -  catid1：true 
  -  catid2：true 
  

我试图建立一个firebaseArray来显示用户点击某个服务的信息和类别。
$ b

; var fb = firebase.database（）。ref（）; app.factory（getServices，[$ firebaseArray，function（$ firebas eArray）{var ref = firebase.database（）。ref（）。child（services）;返回$ firebaseArray（ref）; }））; app.controller（mainController，[$ scope，$ firebaseArray，$ firebaseObject，getServices，function（$ scope，$ firebaseArray，$ firebaseObject，getServices）{$ scope.services = getServices; $ scope.postFullService = function（srvid）{var ref = fb.child（'services /'+ srvid）; $ scope.selectSrvtoPost = $ firebaseObject（ref）; var ref2 = fb.child（'services / （函数（snap））{$ scope.selectCategories = snap; snap.forEach（function（snap2）{$ scope.selectCategories（）; $ src =/ servicecat /'）; var list = $ firebaseArray（ref2）。 .catid = snap2; var id = $ scope.selectCategories.catid。$ id; var ref3 = fb.child（'servicecat /'+ id）; var list2 = $ firebaseObject（ref3）。$ loaded（）.then（function （snap3）{$ scope.selectCategories.catname = snap3;}）}）}）.catch（function（error）{console.log（Error：，error）;}）}}]）;< / script> ;

< body ng-app =sampleApp> < div ng-controller =mainController> < h1>服务列表< / h1> < UL> ng-click =postFullService（service。$ id）class =click>< strong> {{service.title}}< / strong>< br> {{service.details}}< / li> < / UL> < h2>所选服务< / h2> < UL> < li>< strong> {{selectSrvtoPost.title}}< / strong>< br> {{selectSrvtoPost.details}}< / li> < h3>所选类别< / h3> < HR> {{selectCategories}}< hr> {{selectCategories.catid}}< br> {{selectCategories.catid。$ id}}< br> {{selectCategories.catname.name}}< hr> <峰; br><强> UL：其中/强> < UL> < li ng-repeat =catselect in selectCategories> {{catselect。$ id}}< br> Catid：{{catselect.catid}}< / li> < / UL> < / div>< / body>

似乎找到了如何使其工作。我实现在控制台中显示结果，但是我无法创建一个firebaseArray，我可以在DOM中使用它来操作两个表和它的记录链接。看来我应该使用链式承诺来解决这个问题，但是我并不真正了解它是如何工作的。 解决方案

认识到调用 $ firebaseObject 服务或 $ firebaseArray 服务立即返回一个空引用（对象或数组）。一旦数据从服务器返回，现有的引用将填充实际的数据。这些引用包含属性，名称为 $ loaded ，这是一个函数，它返回从数据库中下载初始对象（或数组）数据时解析的promise。该承诺解析为 $ firebaseObject 或 $ firebaseArray 本身。

  var objectPromise = $ firebaseObject（ref）。$ loaded（）; 
 var arrayPromise = $ firebaseArray（ref）。$ loaded（）; 
  

承诺是 $ q服务承诺与AngularJS框架摘要循环集成，因此对$ scope的更改将自动更新DOM。出于这个原因，最好使用 .then 方法.htmlrel =nofollow noreferrer> AngularFire $ q服务承诺超过核心Firebase客户端库返回的承诺的 .then 方法。

来自$ q服务的链承诺可以从多次调用到Firebase服务器创建数据。

I have the two following tables with services and categories:

   - servicecat
      - catid
        - name : "Category Name"
        - services
            - srvid1 : true
            - srvid2 : true
            - srvid3 : true
   - services
     - srvid
        - name: "Service Name"
        - Details: "blabla"
        - servicecat:
            - catid1 : true
            - catid2 : true

I'm trying to build a firebaseArray to show when a user click on a service its information and categories.

<script>

var app = angular.module("sampleApp", ['firebase']);
var fb = firebase.database().ref();

app.factory("getServices", ["$firebaseArray",
  function($firebaseArray) {
    var ref = firebase.database().ref().child("services");
    return $firebaseArray(ref);
  }
]);

app.controller("mainController", ["$scope", "$firebaseArray","$firebaseObject","getServices",
  function($scope, $firebaseArray, $firebaseObject, getServices) {
    $scope.services = getServices;

    $scope.postFullService = function(srvid) {
      var ref = fb.child('services/'+srvid);
      $scope.selectSrvtoPost = $firebaseObject(ref);
      var ref2 = fb.child('services/'+srvid+'/servicecat/');
      var list = $firebaseArray(ref2).$loaded()
      .then(function(snap) {
        $scope.selectCategories = snap;
        snap.forEach(function(snap2) {
          $scope.selectCategories.catid = snap2;
          var id = $scope.selectCategories.catid.$id;
          var ref3 = fb.child('servicecat/'+id);
          var list2 = $firebaseObject(ref3).$loaded()
          .then(function(snap3) {
            $scope.selectCategories.catname = snap3;
          })
        })
      })
      .catch(function(error) {
        console.log("Error: ", error);
      })
    }
  }
]);
</script>

<body ng-app="sampleApp">
  <div ng-controller="mainController">
    <h1>Services List</h1>
    <ul>
      <li ng-repeat="service in services" ng-click="postFullService(service.$id)" class="click"><strong>{{ service.title }}</strong><br>{{ service.details }}</li>
    </ul>
    <h2>Service Selected</h2>
    <ul>
      <li><strong>{{ selectSrvtoPost.title }}</strong><br>{{ selectSrvtoPost.details }}</li>
     <h3>Selected Categories</h3>
     <hr>
     {{ selectCategories }}
     <hr>
     {{ selectCategories.catid }} <br> {{ selectCategories.catid.$id }} <br> {{ selectCategories.catname.name }} <hr>
     <br><strong>UL:</strong> 
     <ul>
      <li ng-repeat="catselect in selectCategories">
        {{ catselect.$id }} <br>
        Catid : {{ catselect.catid }}

      </li>
     </ul>
  </div>
</body>

I can't seem to find how to make it work. I achieve to show the result in the console but I can't create a firebaseArray that I could use in DOM to manipulate the two tables and its records linked. It seems that I should be using chaining promises to solve the problems but I don't really understand how it works.

解决方案

It is important to realize that invoking either the $firebaseObject service or the $firebaseArray service immediately returns an empty reference (object or array). Once the data is returned from the server the existing reference is populated with the actual data. The references have a property called $loaded which is a function which returns a promise which is resolved when the initial object (or array) data has been downloaded from the database. The promise resolves to the $firebaseObject or $firebaseArray itself.

  var objectPromise = $firebaseObject(ref).$loaded();
  var arrayPromise =  $firebaseArray(ref).$loaded();

The promises are $q Service promises which are integrated with the AngularJS framework digest cycle so that changes to $scope will automatically update the DOM. For this reason, It is better use the .then method of AngularFire $q Service promises than the .then method of promises returned by the core Firebase client library.

Chain from the $q service promises to create data from multiple calls to the Firebase server.

这篇关于无法使用Firebase和AngularJS创建链接承诺，FirebaseArray具有两个连续调用以从两个不同的表链接获取数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！