如何显示从 Firebase 检索到的数据到 AngularJS 应用程序答案

【问题标题】：How to display data retrieved from Firebase to AngularJS App如何显示从 Firebase 检索到的数据到 AngularJS 应用程序
【发布时间】：2017-12-15 11:32:07
【问题描述】：

我有一个从 firebase 接收数据的 Angular 应用程序，但我不知道如何在视图中显示数据。从 firebase 检索到的数据是一个具有 3 个具有以下名称的对象的对象：KoAJWEHt6E2krjLgSuB、KoAJWEPc0seRt95JqoH、KoAJWEQDiAsOWwvL2QZ（这些名称是由 firebase 分配的唯一键）。这 3 个对象包含每个人的分类数据。现在我不知道如何在视图中显示这些数据。我已经尝试过 ng-repeat 但它没有显示任何内容并且控制台中没有错误。

控制器：

myApp.controller("classifiedsCtrl",["$scope","$http","$mdSidenav","$mdToast","$mdDialog","$firebaseArray",function($scope,$http,$mdSidenav,$mdToast,$mdDialog,$firebaseArray){
      var ref=firebase.database().ref().child('persons');
      ref.on('value',function(snapshot){
      $scope.classifieds=snapshot.val();
      console.log($scope.classifieds);
   });
}]);

控制器视图：

<md-card flex="30" ng-repeat="classified in classifieds | filter:classifiedsFilter" class="record">
 <md-card-content>
    <div class="classified-info" ng-show="!showContact">
        <h2 class="md-title">{{classified.title | uppercase}}</h2>
        <h3>{{classified.price | currency}}</h3>
        <p>{{classified.description}}</p>
    </div>
    <div class="classified-contact" ng-show="showContact">
        <p>
          <md-icon class="mdi mdi-account"></md-icon>{{classified.name}}</p>
        <p>
          <md-icon class="mdi mdi-phone"></md-icon>{{classified.phone}}</p>
    </div>
     <div layout="row">
           <md-button ng-click="showContact=true" ng-show="!showContact">Contact</md-button>
           <md-button ng-click="showContact=false" ng-show="showContact">Details</md-button>
           <md-button ng-click="showAdmin=true" ng-show="!showAdmin">Admin</md-button>
           <md-button ng-click="showAdmin=false" ng-show="showAdmin">Close</md-button>
     </div>
     <div class="classified-admin" ng-if="showAdmin">
          <h3>Admin</h3>
          <div layout="row">
              <md-button class="md-raised md-primary">Edit</md-button>
                    <md-button ng-click="deleteClassified($event,classified)" class="md-raised md-warn">Delete</md-button>
                </div>
            </div>
        </md-card-content>
    </md-card>

【问题讨论】：

删除您的过滤器以确保它不会搞砸任何事情。然后在ref.on('value' 中放置一个日志，并确保你得到了值。另一件事，ng-repeat 不适用于对象。
我在 ref.on('value' 中放了一个日志，它返回一个对象，其中包含 3 个对象，每个对象都有值。现在如何在视图中显示它？

标签： angularjs firebase firebase-realtime-database angularjs-scope angularjs-view

【解决方案1】：

将您的 firebase 引用传递到 firebasearray，如下所示

var ref=firebase.database().ref().child('persons'); 
$scope.ref=$firebaseArray(ref);
$scope.ref.$loaded().then(function(){
$scope.classifieds=[];
$scope.classifieds=$scope.ref;

})

然后等待 ref 加载在 html 中放置一个条件，如下所示

<div ng-show="classifieds.length>0">
//put your md-card inside this div.
</div>

【讨论】：