Http запрос в течениеEach функция. Angular2

Question

Проблема с использованием функции forEach с запросами HTTP.

У меня есть _watchlistElements переменных, которая держит следующие данные:

[{"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"}]

Теперь, Im делает функцию, которая будет загружать данные с сервера для каждого из этих xid элементов:

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

Он должен загружать данные как объект для каждого значения v.xid и хранить его внутри переменной _values.

private _values: Array<WatchlistComponent> = [];

Но каким-то образом, угловые возвращает ошибку с v.xid элементом. Он не видит эту переменную. Но это странно, потому что, когда я делаю это просто в консоли, я имею в виду: сохранить этот json внутри переменной и использовать функцию forEach на этом элементе v.xid, все работает хорошо.

ERROR в [по умолчанию] C: \ Users \ SRC \ приложение \ appBody \ Список наблюдения \ watchl ist.component.ts: 51: 115 Свойство 'XID' не существует на типе 'WatchlistComponent'.

xid существует ... но внутри _watchlistElements, который загружает данные asynchonously ...

Я не 100% уверен, что этот метод является правильным, но если у вас есть какие-либо идеи, как исправьте это, пожалуйста, скажите мне.

Answer 1

Что происходит, когда вы печатаете массив _values?

Ошибка, указанная выше, является ошибкой типа. Как выглядит интерфейс WatchlistComponent? Включает ли это имущество xid?

Вы можете обойти эту ошибку типа переопределения типа, как ...

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

Насколько поможет вам структурировать ваш код лучше. Если вы хотите совместить результат многих Observables, я бы использовал что-то вроде forkJoin.

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], ...] 
    }); 
} 

ЗДЕСЬ - это Plunker с вышеуказанным методом работы. https://plnkr.co/edit/woXUIDa0gc55WJPOZMKh?p=preview

Похожие: angular2 rxjs observable forkjoin