更新视图未显示的范围变量。承诺不起作用

Question

我正在尝试从我的 Firebase 数据库中检索数据，并从 Firebase 存储中检索相应的图像。问题是，我的视图不想用数据更新自己。

如果我尝试简单地从我的数据库中获取数据，它会完美运行。一旦我添加了获取图片的功能（这需要更长的时间），看起来我的视图只是立即查看范围变量，而不是等待 $scope.friendsinfo 更新。我认为我的承诺做错了，应该使用 $q，但我不知道到底是怎么回事。谁能告诉我最好的方法是什么？非常感谢！

var friendsRef = firebase.database().ref('friendships/' + firebase.auth().currentUser.uid);

$scope.friends = $firebaseArray(friendsRef);

$scope.friendsinfo = [];

$scope.$watch('friends', function() {
    var newfriends = $scope.friends;
    var newfriendsinfo = [];

    for(var i = 0; i < newfriends.length; i++){
        var ref = firebase.database().ref('users/' + newfriends[i].$id);
        var profilePicRef = firebase.storage().ref("profilepictures/" + newfriends[i].$id + "/profilepicture");
        var picPromise = fetchPicture(profilePicRef);

        var newfriendid = newfriends[i].$id;
        var newfriendagreed = newfriends[i].agreed;

        picPromise.then(function(data){
            ref.once('value', function(snapshot){
                newfriendsinfo.push({
                    id: newfriendid,
                    name: snapshot.val().name,
                    email: snapshot.val().email,
                    agreed: newfriendagreed,
                    profilepicture: data //This is the functionality that causes my view to not display the updated $scope.friendsinfo because it takes too long.
                });
            });
        });
    }
    $scope.friendsinfo = newfriendsinfo;
    alert($scope.friendsinfo.length);
}, true);

function fetchPicture(ref){
    return ref.getDownloadURL().then(function(url) {
        return url;
    }).catch(function(error) {
        alert("error");
    });
}

Answer 1

我没有正确获取您的代码，但发布了代码，您将指导如何使用具有解决方法的承诺：

  function asyncGreet(name) {
  var deferred = $q.defer();

  setTimeout(function() {
  deferred.notify('About to greet ' + name + '.');

  if (okToGreet(name)) {
  deferred.resolve('Hello, ' + name + '!');
  } else {
      deferred.reject('Greeting ' + name + ' is not allowed.');
  }
  }, 1000);

  return deferred.promise;
}

var promise = asyncGreet('Robin Hood');
promise.then(function(greeting) {
  alert('Success: ' + greeting);
}, function(reason) {
  alert('Failed: ' + reason);
}, function(update) {
  alert('Got notification: ' + update);
});

Answer 2

如果有人需要解决方案，这里就是。事实证明，问题主要是由于等待 for 循环完成造成的，为此，术语中的每个项目都等待另一个函数完成。这就是我能够解决它的方法。它可能不是最佳的，但现在可以了:)

var friendsRef = firebase.database().ref('friendships/' + firebase.auth().currentUser.uid);

$scope.friends = $firebaseArray(friendsRef);

$scope.friendsinfo = [];

$scope.$watch('friends', function() {
    var newfriends = $scope.friends;

    asyncUpdateFriendsInfo(newfriends).then(function(newlist){
        $scope.friendsinfo = newlist;
    });
}, true);

function fetchPicture(ref){
    return ref.getDownloadURL().then(function(url) {
        return url;
    }).catch(function(error) {
        alert("error");
    });
}

function asyncUpdateFriendsInfo(newfriends){
    var deferred = $q.defer();
    var newfriendsinfo = [];

    for(var i = 0; i < newfriends.length; i++){
        var ref = firebase.database().ref('users/' + newfriends[i].$id);
        var profilePicRef = firebase.storage().ref("profilepictures/" + newfriends[i].$id + "/profilepicture");
        var picPromise = fetchPicture(profilePicRef);

        var newfriendid = newfriends[i].$id;
        var newfriendagreed = newfriends[i].agreed;

        picPromise.then(function(data){
            ref.once('value', function(snapshot){
                newfriendsinfo.push({
                    id: newfriendid,
                    name: snapshot.val().name,
                    email: snapshot.val().email,
                    agreed: newfriendagreed,
                    profilepicture: data
                });
            }).then(function(){
                if (newfriendsinfo.length == newfriends.length){
                    deferred.resolve(newfriendsinfo);
                }
            });
        });
    }

    return deferred.promise;
}