Angular2 Aktualisierungswert von HTTP-Anfrage

Question

Ich habe einen einfachen Dienst tut ein paar Anfragen bekommen:

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()); 
} 

In meiner Komponente habe ich die folgende Funktion, welche Geräte und fügt die Variable aus getVariable an jedes Gerät in dieser abruft. Geräte.

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; 
     } 
    ); 
    } 

dann kann ich getDevicesAndRunning() rufen Sie die Liste der Geräte zu aktualisieren und über sie in der Ansicht durchlaufen. Momentan mache ich das in OnInit und wann auch immer der Benutzer eine Taste klickt. Da this.devices jedoch jedes Mal, wenn die Funktion aufgerufen wird, erneut gefüllt wird, sieht der Benutzer eine leere Liste, unabhängig davon, wie lange die Anforderung dauert, um zu antworten. Alles, was ich will, ist für die res.result aktualisiert werden, nicht das gesamte Array.

Answer 1

Ich mache so etwas, indem ich die ursprünglich zurückgegebene Liste nicht verwende. Ich habe so etwas für eine App implementiert, die jetzt produziert wird und es funktioniert großartig.

Wenn Sie die ursprüngliche Liste bekommen, verstauen Sie sie zur Seite. Erstellen Sie eine Kopie und verwenden Sie diese für die Anzeige.

Wenn Sie es aktualisieren müssen, erhalten Sie die neue Liste, kopieren Sie es, und jetzt haben Sie viele Optionen; alt gegen neu, alt ersetzen, alt und neu kombinieren, Delta anzeigen, usw. Es gibt einige nette ES6-Funktionen, nicht nativ, aber einfach genug, um Dinge wie Gewerkschaften, Diffs usw. zu erledigen, und natürlich wird lodash dienen.

Wahr, das beinhaltet eine Kopie der Liste, aber in der App, die ich gebaut habe ich tausende von Objekten und mindestens sechs Listen gleichzeitig behandelt und hatte nie Probleme mit Speicher usw. Sie müssen nur daran denken, es aufzuräumen Falls benötigt.

Answer 2

Da Sie die Liste in Großbuchstaben aktualisieren, blenden Sie sie aus, während die Aktualisierung stattfindet. Sie müssen das Array beibehalten und es im laufenden Betrieb ändern. Spleiße die entfernten Gegenstände heraus und stecke die neuen hinein. Lassen Sie die Sortierfunktion angular liefert den Rest der Arbeit.