Ionic을 사용하여 Firebase에서 비동기 데이터를 검색 할 때 문제가 발생했습니다.

Ionic과 Firebase에 완전히 새로운 것으로, 값 확인을 사용하여 Firebase 데이터베이스에서 쿼리하려고하는 샘플 프로젝트를 만들려고했습니다. Firebase가 SELECT 쿼리에서 WHERE 절을 조건과 같이 허용하지 않기 때문에 명확하게하기 위해이를 처리하는 방법을 배우려고했습니다.Ionic을 사용하여 Firebase에서 비동기 데이터를 검색 할 때 문제가 발생했습니다.

Here is a snapshot of my Firebase database.

내 의도는 우리가 NG 반복을 사용하여 AngularJS와에서와 데이터를 배열에 700,030의 주소 값이 중 내보기에 표시하는 것입니다.

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

문제는 배열을 두 번 채우고 있다는 것입니다.

$scope.result = $firebaseArray(ref);

그리고 둘째로 당신은 당신이 실제로 child_added 리스너에서 원하는 데이터를 추가합니다 :

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

그래서 간단한 솔루션에 첫 번째 줄을 변경하는 것입니다 모든 데이터가이 줄을 사용하는 최초의 :

$scope.result = [];

출처

2016-09-11 22:06:33

안녕 앙드레, 설명해 주셔서 감사합니다. 나는 당신이 제안한 것을 시도하고 나의 JS에서 줄을 '$ scope.result = []; '하지만 이제는 콘솔에서 올바른 요소가 채워지는 배열을 다시 볼 수 있지만보기에는 값이 표시되지 않습니다. 보기는 기본 Ionic 헤더 만있는 완전히 빈 페이지로 나타납니다. 나 좀 도와 줄 수있어? – Sam

Ionic을 사용하여 Firebase에서 비동기 데이터를 검색 할 때 문제가 발생했습니다.

답변

관련 문제