Question

我有一个表，我想用我从firebase数据库获取的数据进行更新。我知道firebase调用返回一个promise并且数据库调用然后运行异步，但即使在.then方法中，我似乎无法将异步数据提取到我的表视图中。

为了克服异步部分我尝试使用服务（基于这个答案Update scope value when service data is changed）。我使用测试回调方法addValue()来测试添加数据。但是当我在firebase查询的.then（）中使用此回调时，服务的数据会更新，但在视图中不会更新。

routerApp.controller('leaderboardCtrl', function($scope, service) {

            $scope.data = service.data;

            service.getLeaderboard('Test1', 'TestGroup', 10);
            //service.getValues();


}).factory("service", function($rootScope, $q)
{
  return new (function AsyncTest(){
    this.data=[
        {name : "Sam" , score : 190}
    ]
    this.getValues=function()
    {
      var self=this;
        //self.data.push({name : "Sam" , score : 180});
        self.addValue();
        self.count++
    },
    this.count=0,

    this.addValue  =function(){
        var self=this;
        self.data.push({name : "Sam" , score : 180});
    }

    this.getLeaderboard = function(test, groupName, limit){
        var self=this;
        var uid = currentUser.uid;



     firebase.database().ref('/groupMembers/' + groupName).once('value').then(function(snapshot) {
        for(var user in snapshot.val()){
            firebase.database().ref('/tests/' +test + '/users/' + user).orderByChild("score").limitToLast(limit).once('value').then(function (snapshot) {
                       console.log('----LEADERBOARD----');
                       console.log(snapshot.val());
                       self.addValue();
                       console.log(self.data);

             });
            }
        });
    }
  })();

});

Answer 1

使用 firebase 时，通常会在Angular中出现这种情况。在您的addValue()方法中，尝试在推送逻辑之后添加$scope.apply()。

示例：

this.addValue=function(){
    var self=this;
    self.data.push({name : "Sam" , score : 180});
    $scope.apply();
}

$scope.apply()用于更新视图以反映在控制器中完成的操作。

希望这有帮助

AngluarJS和Firebase，使用服务更新表

1 个答案: