Angular2での非同期要求の難しさ

Question

私のアプリケーションといくつかのhttp要求に関連する問題を苦労しています。私はplunker内のすべてのものを示してきた

は：第三httpリクエストが入るまでhttps://plnkr.co/edit/tM9RPL5fxpDqiRqbOF4A?p=preview

しかし、簡単に言えば、すべてが働くそれはファイルからデータを正しくロードされません。それは_watchlistElements変数からすべてのポイントについてjsonからデータを取り込み、変数_valuesの中にドロップする必要があります。

プランナーコードを見れば、私の問題点は簡単にわかります。私は、この単純なコードに多くの作業を加えて、すべてを簡単に記述して動作させるようにしました。選択が変更され

Answer 1

あなたは3つの問題を抱えて：あなたはでgetValuesを呼び出している

1. は正しい場所にない機能します。
2. getValuesからの応答は、オブジェクトであり配列ではありません。
3. ファイル名が正しくありません。

これがソリューションです：

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

、単に値の配列を更新：

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

はJSONファイルは、それがあなたのplunkerに存在しないので、私がテストしたが、私はいくつかの404を持って、それが働いていた場合、私に教えてください。

おはようございます！