Angular 模板无法加载。即使有 $loaded。加载后数据解析

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 变量之前，您必须构建一个承诺数组并等待它们全部在循环外解析。

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 模板无法加载。即使有 $loaded。加载后数据解析

Angular template won't load. Even with $loaded. Data resolves after Load

angularjs

firebase

angularfire