javascript - 在所有数据都存在之前，如何防止 Angular 渲染页面？

Question

我有以下问题:我试图“合并”来自 MongoDB 的两个集合的数据。一切看起来都很好，直到我尝试显示恰好在第一个查询之后出现的第二个查询的一些数据:

$scope.getData = function() {
 var pipeline, fromDateRangeStatement, toDateRangeStatement, service, joblist;
 service = ($scope.service && $scope.service.value) ? $scope.service.value : {
     $exists: true
 };
 pipeline = $scope.utils.getSessionUsersPipeline($scope.fromDate, $scope.toDate,
     $scope.checkedResults, $scope.checkedStatuses, service, $stateParams, $scope.usersLimit);
 toApi.post("/users/aggregate", {
     pipeline: pipeline
 }).success(function(data) {
     $scope.users = data.data.result;
     for (var i = 0; i < $scope.users.length; i++) {
         var path = "/jobs/" + scope.users[i].id + "/sessions";
         var user = $scope.users[i]
         toApi.get(path).success(function(data) {
             user.error = data.data.records[0].exception // this is not shows up in HTML!
             console.log(data.data.records[0].exception); // but it can be logged!
         })
     }
 })

};

所以，问题是:$scope.users 在我的页面上呈现，而它们的属性 error 不是。看起来数据在我为 for 循环中的每个用户更改属性之前就已呈现。如何处理？谢谢

Answer 1

下面是两种不同的解决方案

---

您的每个 GET 请求都是异步的，因此您需要等待所有请求都得到解决。您可以将每个请求包装在自己的 Promise 中，并像这样收集所有 Promise

var promises = [];
for (var i = 0; i < $scope.users.length; i++) {
  promises[i] = new Promise(function (resolve, reject) {
    var path = "/jobs/" + scope.users[i].id + "/sessions";
    var user = $scope.users[i]
    toApi.get(path).success(function(data){
      user.error = data.data.records[0].exception;
      console.log(data.data.records[0].exception);
      resolve(user);
  })
}

然后使用Promise.all()将所有 promise 组合为一个 promise 并等待它解决。

Promise.all(promises).then(function(users) { 
  $scope.users = users;
});

简单示例:http://codepen.io/C14L/pen/QNmQoN

---

不过，一个更简单更好的解决方案是在用户的 API 调用返回时一个接一个地显示用户

for (var i = 0; i < $scope.users.length; i++) {
  var path = "/jobs/" + $scope.users[i].id + "/sessions";
  toApi.get(path).success(function (data) {
      $scope.users[i].error = data.data.records[0].exception;
      $scope.users[i].done = true;
      console.log(data.data.records[0].exception);
  });
}

只需在您的模板中添加对 $scope.users[i].done = true 的检查，然后只用 ng-show="user.done" 显示该数据集>.