forEach函数中的Http请求.角度2

问题描述

在http请求中使用forEach函数时遇到问题.

Having problem with using forEach function with http requests.

我有一个 _watchlistElements 变量，其中包含以下数据:

I have a _watchlistElements variable, which holds following data:

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

现在，我正在制作一个函数，该函数将从服务器中为这些 xid 元素中的每一个下载数据:

Now, Im making a function which will download data from server for each of these xid elements:

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

它必须为每个 v.xid 值下载数据作为对象，并将其存储在 _values 变量中.

It has to download data as object for every v.xid value and store it inside the _values variable.

private _values:数组< WatchlistComponent>= [];

但是不知何故，angular会使用 v.xid 元素返回错误.它没有看到该变量.但这有点奇怪，因为当我仅在控制台中执行此操作时，我的意思是:将json存储在变量中，并在此 v.xid 元素上使用forEach函数，一切正常.

But somehow, angular returns an error with v.xid element. It doesn't see that variable. But it's kinda strange, because when I do it just in console, I mean: store that json inside a variable and use forEach function on this v.xid elements, everything works well.

xid 存在...但是在 _watchlistElements 内部，它异步下载数据...

The xid exists... but inside the _watchlistElements which downloads the data asynchonously...

我不是100％肯定此方法是正确的，但是如果您有任何解决方法的想法，请告诉我.

I'm not 100% sure this method is right, but if you have any ideas how to fix it, please tell me.

推荐答案

打印出_values数组会发生什么?

What happens when you print out the _values array?

上面的错误是类型错误.WatchlistComponent接口是什么样的?它是否包含 xid 属性?

The error above is a type error. What does the WatchlistComponent interface look like? Does it include an xid property?

您可以通过覆盖类似...的类型来避免类型错误.

You can get around the type error by overriding the type like...

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

就帮助您更好地构建代码而言.如果要合并许多Observable的结果，则可以使用forkJoin之类的东西.

As far as helping you structure your code better. If you want to combine the result of many Observables, I would use something like 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], ...]
  });
}

HERE是使用上述方法的Plunker. https://plnkr.co/edit/woXUIDa0gc55WJPOZMKh?p=preview

HERE is a Plunker with the above method working. https://plnkr.co/edit/woXUIDa0gc55WJPOZMKh?p=preview

相关: angular2 rxjs可观察到的forkjoin

这篇关于forEach函数中的Http请求.角度2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！