使用 Ionic 在 Firebase 中检索异步数据时遇到问题答案

【问题标题】：Trouble in Asynchronous data retrieving in Firebase using Ionic使用 Ionic 在 Firebase 中检索异步数据时遇到问题
【发布时间】：2017-01-19 03:29:00
【问题描述】：

我对 Ionic 和 Firebase 完全陌生，并试图创建一个示例项目，我试图在其中使用检查值从 Firebase 数据库中进行查询。为了清楚起见，由于 Firebase 不允许在 SELECT 查询中使用 WHERE 子句，因此试图学习如何处理它。

Here is a snapshot of my Firebase database.

我的意图只是在我的视图上显示数组中地址值为 700030 的任何数据，就像我们在 AngularJS 中使用 ng-repeat 所做的那样。

var app = angular.module('starter', ['ionic', 'firebase'])

app.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    if(window.cordova && window.cordova.plugins.Keyboard) {
      
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);

      cordova.plugins.Keyboard.disableScroll(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})

app.controller('MainCtrl', function($scope, $firebaseArray){
       
	var ref = new Firebase('https://helpee-70271.firebaseio.com');
	
	$scope.result = $firebaseArray(ref);
	
	ref.orderByChild("address").on("child_added", function(data) {
	   console.log("Initially :" + JSON.stringify($scope.result));
       	   //console.log(data.val().address);
	   if(data.val().address == "700030"){
	      console.log(data.val().address);
	      $scope.result.push(data.val());
	   }
	   console.log(JSON.stringify($scope.result));
	});
});

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!--Firebase addition start -->
    <script src="https://cdn.firebase.com/js/client/2.2.2/firebase.js"></script>
    <script src="https://cdn.firebase.com/libs/angularfire/1.0.0/angularfire.min.js"></script>
    <!--Firebase addition end -->
    
    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>
  </head>
  <body ng-app="starter">

    <ion-pane>
      <ion-header-bar class="bar-stable">
        <h1 class="title text-center">Ionic Blank Starter</h1>
      </ion-header-bar>
      <ion-content ng-controller="MainCtrl">
         <div>
	    <div ng-repeat ="results in result">
	         <div>{{results.name}}</div>
		     <div>{{results.phNumber}}</div>
	    </div>
	 </div>
      </ion-content>
    </ion-pane>
  </body>
</html>

这是我的代码 sn-p。遇到的问题是，虽然数据的检查和检索正在正确完成，但在视图中看到包含所有元素的数组（不管地址检查如何）首先打印，然后是应该打印的值。

Here is the snapshot of the View and the console of the browser

谁能帮我解决这个问题并解释我哪里出错了？将非常感激，因为我对此真的很陌生，并且愿意学习。提前致谢！！

【问题讨论】：

标签： javascript angularjs ionic-framework firebase firebase-realtime-database

【解决方案1】：

您的问题是您要填充数组两次。首先使用这一行的所有数据：

$scope.result = $firebaseArray(ref);

其次，您在 child_added 监听器中添加您真正想要的数据：

$scope.result.push(data.val());

所以简单的解决方案是将第一行更改为：

$scope.result = [];

【讨论】：

嗨安德烈，感谢您的解释。我尝试了您的建议并在我的 JS 中将行更改为 '$scope.result = [ ] ; ' 但现在虽然在控制台中再次看到数组填充了正确的元素，但在视图中没有显示任何值。视图显示为一个完全空白的页面，只有默认的 Ionic 标题。你能帮帮我吗？