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，而不是整个数组。

Answer 1

由于您正在批量更新列表，因此在刷新时会将其清空。您需要保留数组并动态更改它。拼出已移除的物品并推入新物品。让sort函数angular提供其余的工作。

Answer 2

我通过不使用最初返回的列表来做这种事情。我为现在正在制作的应用程序实现了类似的功能，并且效果很好。

当您获得原始列表时，将其存放在旁边。创建一个副本并将其用于显示。

当您需要更新它时，获取新列表，复制它，现在您有很多选择;旧的和新的，替换旧的，结合新旧，显示delta等。有一些不错的ES6功能，不是原生的，但很简单，在那里做一些事情，如工会，差异等，当然lodash将服务。

是的，这涉及到列表的副本，但在我构建的应用程序中，我同时处理了数千个对象和至少6个列表，并且从未遇到任何内存等问题。您只需记得清理它，如果必要。

Angular2从http请求更新值

2 个答案: