如何从 $firebaseArray 范围更新 DOM？答案

【问题标题】：How to update DOM from $firebaseArray scope?如何从 $firebaseArray 范围更新 DOM？
【发布时间】：2023-03-21 15:33:02
【问题描述】：

如何从 $firebaseArray 中更新 DOM？
目前 DOM 直到循环完成后才会更新。

HTML

  <div>{{trip.load_progress}}% Loading</div>

AngularJS：

   $scope.syncArray = $firebaseArray(ref_read_path);
            $scope.trip = {};
            $scope.trip.load_progress = 1;
            $scope.syncArray.$loaded().then(function(items) {
                    for(var z = 0 ; z < items.length ; z++) {
                        var percentage = Math.round(items.length / 100);
                        if (z == percentage * $scope.trip.load_progress) {
                                $scope.trip.load_progress = $scope.trip.load_progress  + 1;
                        }
                    }
            })

我使用时也是这样：
Firebase 的 ref_read_path.once("value", function (tripPath) { ...}

【问题讨论】：

标签： angularjs firebase firebase-realtime-database promise angularfire

【解决方案1】：

通过实现$loaded()，您的代码会在 Angular 不再意识到它的时刻运行。要让 Angular 获取对范围的更改，请使用 $timeout() 在摘要循环中运行代码：

$scope.syncArray = $firebaseArray(ref_read_path);
$scope.trip = {};
$scope.trip.load_progress = 1;
$scope.syncArray.$loaded().then(function(items) { 
    $timeout(function() {
        for(var z = 0 ; z < items.length ; z++) {
            var percentage = Math.round(items.length / 100);
            if (z == percentage * $scope.trip.load_progress) {
                    $scope.trip.load_progress = $scope.trip.load_progress  + 1;
            }
        }
    });
})

【讨论】：