Schwierigkeiten mit asynchronen Anfragen in Angular2

Question

Seit ein paar Tagen Ich kämpfe durch meine Anwendung und Probleme mit einigen http Anfragen.

ich alles in Plunker gezeigt habe: https://plnkr.co/edit/tM9RPL5fxpDqiRqbOF4A?p=preview

Aber kurz gesagt, alles funktioniert, bis die dritte HTTP-Anforderung kommt es laden Daten nicht richtig aus den Dateien.. Es sollte Daten von json für jeden Punkt von der _watchlistElements Variable aufnehmen und es innerhalb der _values Variablen fallen lassen.

Wenn Sie in den Plunker-Code schauen, werden Sie leicht bekommen, was genau mein Problem ist. Ich habe viel Arbeit in diesen Code gesteckt, damit es funktioniert und alles auf einfache Art und Weise beschreibt.

Answer 1

Sie haben drei Probleme:

1. Sie rufen die getValues ​​funktionieren nicht in der richtigen Stelle.
2. Sie Antwort von getValues ​​http Aufruf sind Objekte, kein Array.
3. Der Dateiname ist nicht korrekt.

Dies ist die Lösung:

export class App implements OnInit { 
private _items: Array<WatchlistComponent> = []; 


    constructor(@Inject(Http) private http: Http) { 
    this.http.get('items.json') 
     .subscribe(res => this._items = res.json()); //returns names of the lists, e.g. WL_616873 
    }; 

    private _watchlistElements: Array<WatchlistComponent> = []; 


    private updateWatchlistTable(xid) { 
    this._watchlistElements = []; 
    this.http.get(xid + '.json') 
     .subscribe(res => { 
      this._watchlistElements = res.json(); 
      this.getValues(); 
     }); 
    } 


    private _values: Array<WatchlistComponent> = []; 



    private xid: string; 

    private getValues() { 
    this._values = []; 
    this._watchlistElements.map(v => 
    this.http.get(v.xid + '.json') 
     .subscribe(res =>{ 
      this._values.push(res.json()); 
     })); 
    } 


    ngOnInit() { 
    this.getValues(); 
    } 

} 

Plunker

Answer 2

Wenn die Auswahl geändert wird, nur die Werte Array aktualisieren:

private updateWatchlistTable(xid) { 
console.log(xid); 
this._watchlistElements = []; 
this.http.get(`${xid}.json`) 
    .subscribe(res => { 
     this._watchlistElements = res.json(); 
     this.getValues();//add this 
    } 
    ); } 

Lassen Sie mich wissen, ob es funktioniert, ich getestet, aber ich habe ein paar 404, weil json Dateien, die es nicht in Ihrem Plunker existiert.

Grüße !!