表（ng-repeat）无法通过多个Ajax调用正确加载

Question

我有一张表，它的所有列（一个列除外）都由一个后端调用填充。 单独调用服务器以获取最后一列的数据。 我要注意的是，有时此数据正确显示在表上，而有时却不正确。 可能是由于第二次ajax调用的时间安排。 想知道正确的方法应该是解决此问题。 这是我所拥有的

HTML：

<tr ng-repeat=“item in ctrl.items">
  <td>{{ item.name }}</td>
  <td>{{ item.desc }}</td>
  <td><i class=“icon icon-check”></i> ng-class=“{ ‘active': ctrl.isActive(item) }”></td>
</tr>

控制器：

loadItems() {
  myService.getItems().then( (response) => {
       this.items = response;
       this.loadColors();
  });
}

loadColors() {
  myService.getColors().then( (response) => {
     _.forEach(response, (val, key) => {
          _.forEach(this.items, function(item) {
               if (item.id === key) {
                    item.colors = val;
               }
          });
     });
  });
}

isActive(item) {
    return _.some(item.colors, function (color) {
        return color === ‘green’ || color === ‘blue';
    });
}

最后一列（图标检查）没有始终应用活动的CSS类。 有时，它在页面重新加载后有效，有时却不起作用。 我在这里肯定做错了什么...我试图在$ timeout和$ scope。$ apply中包装this.loadColors() ，但似乎都没有解决。

Answer 1

由于您的输出取决于两个不同调用对结果的响应，因此您需要将它们链接起来，以便在两个完成后都可以得到结果。

loadItems() {
  myService.getItems().then( (response) => {
       this.items = response;
       myService.getColors().then( (colorResponse) => {
     _.forEach(colorResponse, (val, key) => {
          _.forEach(this.items, function(item) {
               if (item.id === key) {
                    item.colors = val;
               }
          });
     });
  });
  });
}

这应该可以解决问题。

编辑我修改了我的代码，可能是因为较早分配了项目。 在修改的代码中，我将其移至最后一步。

loadItems() {
      myService.getItems().then( (response) => {
           var items = response;
           myService.getColors().then( (colorResponse) => {
         _.forEach(colorResponse, (val, key) => {
              _.forEach(items, function(item) {
                   if (item.id === key) {
                        item.colors = val;
                   }
              });
         });
         this.items = items; //Assigning it to items after we have set the colors.
      });
      });
    }