AngularJS AngularFire Firebase firebase 데이터를 반복합니다.

Question

AngularJS 프로젝트에서 AngularFire를 사용하고 있습니다. 다음 HTML에서 quote 항목을 내 컨트롤러의 total_votes 함수에 전달하는 것을 볼 수 있습니다. quotes이

// get quotes 
    var ref = firebase.database().ref().child('quotes'); 
    $scope.quotes_obj = $firebaseObject(ref); 
    $rootScope.quotes = $firebaseArray(ref); 

어디에서 온

<div ng-repeat="quote in quotes" ng-init="total_votes(quote)"> 
     {{quote.name}} 
    </div> 

이 문제는이 인쇄되는 것입니다

$scope.total_votes = function(itm) { 
     console.log(itm.votes) 
     console.log(itm.votes) 
     console.log(itm.votes[0]) 
     console.log(itm.votes.length) 
    }; 

같은 함수가 모습입니다

console.log(itm.votes)

,

{ 
     "quote": "untitled", 
     "recorded_by": "-KzFkQYHWKwbAPjIekWz", 
     "votes": { 
     "-KzFkQYHWKwbAPjIekWz": "sad", 
     "-KzLT76T14doKgYbjRc1": "wow" 
     }, 
     "who": "null", 
     "$id": "-KzKz7EyCSPkPl0YDvfa", 
     "$priority": null, 
     "$$hashKey": "object:15" 
    } 

console.log(itm.votes) { "-KzFkQYHWKwbAPjIekWz", "슬픈" "- KzLT76T14doKgYbjRc1": "와우"}

console.log(itm.votes[0]) 정의되지 않은

console.log(itm.votes.length) 정의되지 않은

은 어떻게 반복 할 따옴표에서 투표 하시겠습니까? 길이가 정의되지 않은 이유는 무엇입니까? 어떻게 itm.votes[0]과 같은 색인을 통해 개별 항목에 도달 할 수 있습니까?

Answer 1

$firebaseObject() 및 $firebaseArray()은 비동기입니다. 데이터가 네트워크를 통해 다운로드 될 때까지 기다려야합니다. 일반적으로 오래 걸리는 것은 아니지만 즉시 사용할 수 없음을 의미합니다.

AngularJS의 더티 검사 시스템 때문에보기에 데이터가 표시됩니다. 데이터가 사용 가능할 때 Angular는 $ scope의 값을 알고 있으므로 뷰를 자동으로 채 웁니다.

I've written about this in a blog post and done a screencast covering it as well.

당신은 NG-반복하여보기에서 데이터를 반복 할 수 있습니다.

<div ng-repeat="item in items"> 
    {{ item }} 
</div> 

이 방법을 사용하면 데이터를 항상 최신 상태로 유지할 수 있습니다.

귀하의 "득표 수"가 "따옴표"에 중첩되어 있기 때문에이 경우 까다로울 수 있습니다. 자신의 최상위 데이터 구조에 "투표"를 나누는 것이 좋습니다. 관계를 유지하기 위해 그들 사이에서 키를 공유 할 수 있습니다.

{ 
    "quotes": { 
    "a": { 
     "name": "A" 
    } 
    }, 
    "votes": { 
    "a": { 
     "count:" 11 
    } 
    } 
} 

또는 해결 된 해결 방법을 사용하여 $ loaded 약속을 사용하여 데이터를 확인할 수 있습니다. 블로그 포스트가 다루는 글.