Angular2

时间:2016-12-11 18:27:55

标签: javascript angular asynchronous xmlhttprequest

因为几天我在应用程序中遇到困难以及与几个http请求相关的问题。

我已经在plunker中展示了所有内容:https://plnkr.co/edit/tM9RPL5fxpDqiRqbOF4A?p=preview

但简而言之,一切都有效,直到第三个http请求进入。它没有正确地从文件加载数据。它应该从_watchlistElements变量的每个点获取json的数据,并将其放在_values变量中。

如果你看一下plunker代码,你很容易得到我的问题。我已经在这个plunker代码中投入了大量的工作来使它工作并以一种简单的方式描述所有内容。

2 个答案:

答案 0 :(得分:2)

您有三个问题:

  1. 您正在调用getValues函数,而不是在正确的位置。
  2. 您对getValues的响应http调用是对象,而不是数组。
  3. 您的文件名不正确。
  4. 这是解决方案:

    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

答案 1 :(得分:0)

更改选择后,只需更新数值数组:

ID

让我知道它是否有效,我测试但是我有一些404因为json文件它在你的plunker中不存在。

问候!!