Angular2更新http请求中的值

Question

我有一个简单的服务，它做了一些获取请求：

getDevices() {
  return this.http.get('https://api.particle.io/v1/devices')
    .map((response: Response) => response.json());
}

getVariable(deviceId: string) {
  return this.http.get('https://api.particle.io/v1/devices/' + deviceId + '/running')
    .map((response: Response) => response.json());
}

在我的组件中，我具有以下函数，该函数获取设备并将getVariable中的变量添加到this.devices中的每个设备。

  getDevicesAndRunning() {
    function callback(array, data, res) {
      array.push(Object.assign(data, {"running": res.result}))
    }
    this.photonService.getDevices()
      .subscribe(
        data => {
          const myArray = [];
          for (var i=0; i<data.length; i++) {

            if (data[i].connected) {
              console.log(data, i);
              this.photonService.getVariable(data[i].id)
                .subscribe(
                  callback.bind(this, myArray, data[i])
                );
            };
          }
          this.devices = myArray;
        }
      );
  }

然后，我可以调用getDevicesAndRunning()来更新设备列表并在视图中对其进行迭代。 目前，我在OnInit以及用户单击按钮时都在执行此操作。 然而，由于this.devices得到每次重新填充函数被调用用户将看到一个空白的列表但是长的要求需要做出回应。 我想要的res.result要更新res.result ，而不是整个数组。

Answer 1

由于您要批量更新列表，因此在刷新时将其清空。 您将需要保留阵列并即时更改它。 拼接出已删除的项目并推入新的项目。 让排序功能为您提供剩下的工作。

Answer 2

我通过不使用原始返回的列表来执行此类操作。 我为现在正在生产的应用程序实现了类似的功能，并且效果很好。

当您得到原始清单时，将其藏在一边。 创建一个副本并将其用于显示。

当您需要更新它时，获取新列表，将其复制，现在您有了很多选择。 有旧有新，有新有旧，新旧结合，显示增量，等等。ES6有一些不错的功能，不是本机而是足够简单的，可以执行诸如并集，差异之类的事情，当然lodash也可以使用。

的确，这涉及到列表的副本，但是在我构建的应用程序中，我同时处理了数千个对象和至少六个列表，而内存等从来没有任何问题。您只需要记住在必要时清理它。