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 для каждого устройства в этом. устройства.

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 получает repopulated каждый раз, когда функция называется пользователем, пользователь видит пустой список, хотя бы длинный запрос, требуемый для ответа. Все, что я хочу, это для обновления res.result, а не для всего массива.

Answer 1

Я делаю такие вещи, не используя первоначально возвращенный список. Я реализовал что-то подобное для приложения, которое сейчас работает, и оно отлично работает.

Когда вы получите исходный список, приложите его в сторону. Создайте копию и используйте ее для отображения.

Когда вам нужно его обновить, получите новый список, скопируйте его, и теперь у вас есть много вариантов; старые и новые, заменяют старые, объединяют старые и новые, отображают дельта и т. д. Есть некоторые хорошие функции ES6, а не родные, но достаточно простые, чтобы делать такие вещи, как союзы, различия и т. д., и, конечно же, lodash будет служить.

Верно, это связано с копией списка, но в приложении, которое я построил, я имел дело с тысячами объектов и не менее шести списков одновременно и никогда не имел проблем с памятью и т. Д. Вы просто должны помнить, чтобы очистить его если необходимо.

Answer 2

Поскольку вы массово обновляете список, вы гаснете его во время обновления. Вам нужно будет сохранить массив и изменить его на лету. Соедините удаленные элементы и вставьте новые. Пусть функция сортировки угловая обеспечивает выполнение остальной части работы.