Question

使用AngularFire，Angular，Firebase。我从Firebase数据库加载了一个用户列表。我使用$ loaded来确保它等待数据加载。我将此列表与其他组的firebase数据库进行比较，并将结果推送到两个数组中。基于console.logs，数据正确排序。但是，在我的模板中，我得到一个空白页面（我认为这是因为页面在数据排序之前加载）。

思想？

    let userLoggedIn = AuthFactory.getUser();
var allUsersArray = $firebaseArray(ConnectFactory.fbUserDb);
var x = firebase.database().ref('groups');

var friendArr = [];
var notFriendArr = [];

allUsersArray.$loaded().then(function(){
    angular.forEach(allUsersArray, function(user, i) {

            var haveIAdded = x.child(userLoggedIn).child(allUsersArray[i].uid).once('value').then(function (snap) {
                if (snap.val() !== null) {
                    return true;
                } else {
                    return false; 
                }
            });

            var haveTheyAdded = x.child(allUsersArray[i].uid).child(userLoggedIn).once('value').then(function (snap) {
                if (snap.val() !== null) {
                    return true;
                } else {
                    return false; 
                }
            });

            Promise.all([haveIAdded, haveTheyAdded]).then(function([you, they]) {
                if (you && they) {
                    console.log('We Are Friends', allUsersArray[i]);
                    friendArr.push(allUsersArray[i]);
                } else {
                    console.log('not a friend ', allUsersArray[i]);
                    notFriendArr.push(allUsersArray[i]);
                }
            });
    });
    $scope.friendList = friendArr;
    $scope.notFriendList = notFriendArr;
});

Answer 1

好的，这次我试着在尝试回答之前真正阅读了这个问题。 ;-)

当您在$ loaded承诺中设置$ scope.friendList和$ scope.notFriendList时，Promise.all可能（并且很有可能）在调用这些承诺时已经解决了，因为angular.forEach在继续执行函数中的下一个语句之前，不会等待承诺完成。因此，在尝试设置$ scope变量之前，您必须构建一个promise数组并等待它们全部解析。

allUsersArray.$loaded().then(function(){
    var promises = [];
    var friendArr = [];
    var notFriendArr = [];

    angular.forEach(allUsersArray, function(user, i) {

        ... // Same as before

        promises.push(
            Promise.all([haveIAdded, haveTheyAdded]).then(function([you, they]) {
                if (you && they) {
                    console.log('We Are Friends', allUsersArray[i]);
                    friendArr.push(allUsersArray[i]);
                } else {
                    console.log('not a friend ', allUsersArray[i]);
                    notFriendArr.push(allUsersArray[i]);
                }
            })
        );
    });

    Promise.all(promises).then(function(){
       $scope.friendList = friendArr;
       $scope.notFriendList = notFriendArr;
    });
});

Angular模板不会加载。即使加载了$。加载后数据会解析

1 个答案: