Http Anfrage in forEach Funktion. Angular2

Question

Probleme mit der Funktion forEach mit HTTP-Anfragen.

Ich habe eine _watchlistElements Variable, die Daten gilt:

[{"xid":"DP_049908","name":"t10"},{"xid":"DP_928829","name":"t13"},{"xid":"DP_588690","name":"t14"},{"xid":"DP_891890","name":"t16"},{"xid":"DP_693259","name":"t17"}]

Jetzt Im eine Funktion zu machen, die Daten vom Server für jede dieser xid Elemente herunterladen werden:

private download() { 
    this._watchlistElements.forEach(v => 
    this.http.get('http://localhost:8080/getValue/' + v.xid) 
    .subscribe(res => this._values = res.json())); 
} 

Es muss Daten als Objekt für jeden v.xid Wert herunterladen und in der Variablen _values speichern.

private _values: Array<WatchlistComponent> = [];

Aber irgendwie Winkel kehrt ein Fehler mit v.xid Element. Es sieht diese Variable nicht. Aber es ist irgendwie seltsam, denn wenn ich es nur in der Konsole mache, meine ich: Speichern Sie das JSON in einer Variablen und verwenden Sie für jede Funktion v.xid Elemente, alles funktioniert gut.

ERROR in [Standard] C: \ Users \ src \ app \ appBody \ Merken \ watchl ist.component.ts: 51: 115 Property 'xid' existiert nicht auf Typ 'WatchlistComponent'.

Die xid existiert ... aber innerhalb der _watchlistElements die asynchonously die Daten herunterlädt ...

Ich bin nicht 100% sicher, dass diese Methode richtig ist, aber wenn Sie irgendwelche Ideen, wie man repariere es, bitte sag es mir.

Answer 1

Was passiert, wenn Sie das Array _values ​​ausdrucken?

Der obige Fehler ist ein Typfehler. Wie sieht die WatchlistComponent-Schnittstelle aus? Beinhaltet es eine xid Eigenschaft?

Sie rund um die Art Fehler wie durch Überschreiben der Art bekommen kann ...

private download() { 
    this._watchlistElements.forEach((v as any) => 
    this.http.get('http://localhost:8080/getValue/' + v.xid) 
    .subscribe(res => this._values = res.json())); 
} 

Was hilft Ihnen, Ihren Code besser zu strukturieren. Wenn Sie das Ergebnis vieler Observables kombinieren möchten, würde ich etwas wie forkJoin verwenden.

private download():void { 
    //create an array of Observables 
    let el$ = _watchlistElements.map(el => { 
    return this.http.get('http://localhost:8080/getValue/' + el.xid) 
      .map(res: Response => <any>res.json()); 
    }); 

    //subscribe to all, and store the data, el$ is an array of Observables 
    Observable.forkJoin(el$).subscribe(data => { 
    this._values = data; //data will be structured as [res[0], res[1], ...] 
    }); 
} 

HIER ist ein Plunker mit der oben genannten Methode arbeiten. https://plnkr.co/edit/woXUIDa0gc55WJPOZMKh?p=preview

Verwandte: angular2 rxjs observable forkjoin