如何等待 $firebaseArray 数据答案

【问题标题】：How to wait for $firebaseArray data如何等待 $firebaseArray 数据
【发布时间】：2017-09-16 15:31:00
【问题描述】：

以下是我的 firebase 查询，运行良好：

var orderedPlayers = databaseService.players.orderByChild("id");

我的意图是然后将每个玩家的总分相加：

            $scope.sum = function(items, prop){
            return items.reduce( function(a, b){
            return a + b[prop];
            }, 0);
            };

            $scope.selectedPlayers = $firebaseArray (orderedPlayers);
            $scope.totalGoals = $scope.sum($scope.players, 'goals');

问题是，当我直接在 firebase 数据库中更改进球数时，我的范围内显示的每个球员下的进球数都会实时更新，但结果总进球数没有相应变化.

即$scope.selectedPlayers updates in real time 但$scope.totalGoals 仅在刷新页面后更新。

是否也可以实时更新后者？

【问题讨论】：

标签： javascript angularjs firebase web-applications firebase-realtime-database

【解决方案1】：

我不确定你想看什么，但试试这个：

$scope.$watch('players', (newVal, oldVal)=>{
   $scope.totalGoals = $scope.sum(newVal, 'goals');
});

现在这将监视 $scope.players 你可能需要一些其他变量的变化。

【讨论】：

【解决方案2】：

您可以使用$scope.$watch 检查要更改的值。由于您正在寻找要更改的 $scope 值，因此语法如下：

$scope.$watch('players', function (newValue, oldValue) {
    $scope.totalGoals = $scope.sum(newValue, 'goals');
})

在您的情况下不需要它，但是如果您想查看某个任意变量而不是 $scope 上的某些内容，您可以将“玩家”字符串替换为返回您想要检查更改的内容的函数：

let something = {
    somethingElse: 'hello world'
};
$scope.$watch(function () {
    return something.somethingElse;
}, function (newValue, oldValue) {});

请注意，$watch 语句（无论是第一种样式还是第二种样式）都会导致代码在每次调用摘要循环时运行以检查更改，因此使用大量此类语句会降低性能。

【讨论】：

您提供的语法无效。由于某种原因，它没有返回 sum 函数的结果
@DejiJames 你在说第二个例子吗？这是一个假设的情况，您想观察一个不在示波器上的物体。由于这是一个假设，我将第二个函数留空，所以它什么也没做。第一个函数告诉 Angular 它应该注意什么来改变；第二个函数说明当它发生变化时要做什么。
不，我说的是第一个例子。 {{totalPoints}} 在视图中为空白。
如果您的模板显示 {{totalPoints}}，那就不足为奇了。该变量名为 totalGoals。但如果这只是您评论中的一个错字，那么我们需要查看您的模板才能调试您的问题。

【解决方案3】：

使用$loaded() method返回的承诺：

$scope.selectedPlayers = $firebaseArray (orderedPlayers);

var qPromise = $scope.selectedPlayers.$loaded();

qPromise.then(function(dataArray) {
    console.log(dataArray);
    $scope.totalGoals = $scope.sum($scope.players, 'goals');
});

重要的是要意识到$firebaseArray 方法会立即返回一个空引用。从服务器返回数据后，现有参考将填充实际数据。总和只有从服务器到达后才能计算。

【讨论】：