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

Posted 2023-03-08

【中文标题】更新视图未显示的范围变量。承诺不起作用

【英文标题】：Updated scope variable not showed by view. Promises not working

【发布时间】：2017-03-02 11:25:24

【问题描述】：

我正在尝试从我的 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");
    );

【参考方案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);
);

【参考方案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;