Ionicを使用してFirebaseで非同期データを取得する際の問題

IonicとFirebaseがまったく新しく、値のチェックを使用してFirebaseデータベースから照会しようとしているサンプルプロジェクトを作成しようとしました。 FirebaseがSELECTクエリのような条件でWHERE句を許可しないので、それを処理する方法を習得しようとしていたので、それを明確にするために。Ionicを使用してFirebaseで非同期データを取得する際の問題

Here is a snapshot of my Firebase database.

私の意図は、私たちがNGリピートを使用してAngularJSでそうであるようにデータが配列で700030のアドレス値を持っている方、私のビューに表示するだけです。ここで

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){ 
 
     
 
\t var ref = new Firebase('https://helpee-70271.firebaseio.com'); 
 
\t 
 
\t $scope.result = $firebaseArray(ref); 
 
\t 
 
\t ref.orderByChild("address").on("child_added", function(data) { 
 
\t console.log("Initially :" + JSON.stringify($scope.result)); 
 
     \t //console.log(data.val().address); 
 
\t if(data.val().address == "700030"){ 
 
\t  console.log(data.val().address); 
 
\t  $scope.result.push(data.val()); 
 
\t } 
 
\t console.log(JSON.stringify($scope.result)); 
 
\t }); 
 
});

<!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> 
 
\t  <div ng-repeat ="results in result"> 
 
\t   <div>{{results.name}}</div> 
 
\t \t  <div>{{results.phNumber}}</div> 
 
\t  </div> 
 
\t </div> 
 
     </ion-content> 
 
    </ion-pane> 
 
    </body> 
 
</html>

私のコードスニペットです。問題は、データのチェックと検索が適切に行われている間に、アドレスチェックに関係なくすべての要素を含む配列が最初に印刷され、次に印刷されるべき値が表示されていることを見るときです。

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

誰もがこの問題を修正し、どこが間違っているつもりだ私を説明するために、どのように私を助けてくださいことはできますか？これに本当に新しいと喜んで勉強しているので、非常に借りているだろう。前もって感謝します！！

出典

2016-09-11 Sam

あなたの問題は、あなたのアレイを2回満たしていることです。は、この行を使用して、すべてのデータを最初に：

$scope.result = $firebaseArray(ref);

そして第二に、あなたが実際にchild_addedリスナーに必要なデータを追加します。

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

だから、簡単な解決策は、にその最初の行を変更することです：

$scope.result = [];

出典

2016-09-11 22:06:33

HI Andre、説明のためにありがとう。私はあなたが示唆したことを試して、私のJSの行を '$ scope.result = [];に変更しました。 'しかし、今はコンソールでは、右の要素が表示されている配列が再び表示されますが、ビューでは値は表示されません。ビューは、デフォルトのIonicヘッダーのみを含む完全に空白のページとして表示されます。私を助けてもらえますか？ – Sam

Ionicを使用してFirebaseで非同期データを取得する際の問題

答えて

関連する問題