Трудности с асинхронными запросами в Angular2

Question

С тех пор я несколько дней пробовал свое приложение и проблемы, связанные с несколькими HTTP-запросами.

Я показал все внутри plunker: https://plnkr.co/edit/tM9RPL5fxpDqiRqbOF4A?p=preview

Но коротко говоря, все работает, пока запрос на третий HTTP приходит в Он не загружает данные правильно из файлов.. Он должен обрабатывать данные из json для каждой точки из переменной _watchlistElements и отбрасывать ее внутри переменной _values.

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

Answer 1

Вы три проблемы:

1. Вы вызываете GetValues ​​функционируют не в нужном месте.
2. Ответ от getValues ​​http call - это объекты, а не массив.
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 
    } 
    ); } 

Позвольте мне знать, если он работал, я тестировал, но у меня есть некоторые 404, потому что JSON файлы не существуют в вашем plunker.

Приветствия !!