Question

我正在尝试使用Angular 2的http GET来检索HackerNews上的热门文章列表，之后我将在嵌套的observable中检索它们各自的细节。

当我尝试循环并在HTML中显示数据时遇到此错误。

无法找到不同的支持对象'[object Object]'

另外，我猜应该有更好的方法来做这个，任何指针？

getTopPost() {
    this.http.get('https://hacker-news.firebaseio.com/v0/topstories.json')
      .map(res => res.json())
      .subscribe(
        data => { 
                    data.map(function(postId){
                            let storyUrl = "https://hacker-news.firebaseio.com/v0/item/"+ postId +".json";
                            that.http.get(storyUrl)
                                .map(res => res.json())
                                .subscribe(data => that.hnData = data, 
                                           err => that.logError(err),
                                           () => console.log(that.hnData));

                        });

                },
        err => this.logError(err);
      );

  }

HTML

<ion-item *ngFor="#item of hnData">
        {{item.title}}
</ion-item>

Answer 1

我认为你可以用更像Rx-ish的方式重写它：

getTopPost() {
  return http.get('https://hacker-news.firebaseio.com/v0/topstories.json')
    .map(res => res.json())
    .mergeMap(list => Observable.fromArray(list))
    .mergeMap(postId => http.get("https://hacker-news.firebaseio.com/v0/item/"+ postId +".json"))
    .map(res => res.json())
}

Answer 2

我认为嵌套可观察的xhr电话是一种很好的做法......但我不是专家，并且无法告诉你为什么会遇到这种异常（也许关于这个string var ..）。

但我有不同的方法向您展示：

第一个组件that加载ID列表，然后为每个组件生成其他组件<top-stories>：

<top-story>

组件@Component({ selector: 'top-stories', providers: [], template: ' <div> <h2>Hacker news top stories:</h2> <ul> <li top-story *ngFor="#story; #i = index of list | async" [num]="i+1" [id]="story"></li> </ul> </div> ', directives: [TopStory] }) export class TopStories { list: Observable<Array<number>>; constructor(private http: Http) { this.list = this.http.get('https://hacker-news.firebaseio.com/v0/topstories.json') .map(res => res.json()) .map(list => list.slice(0, 30)); } }加载自己发布详细信息并显示它：

<top-story>

你可以在这个plunker玩它： http://plnkr.co/edit/BRMlyD?p=preview

Angular 2中的嵌套Observable

2 个答案: