Angular 2中的嵌套Observable

我正在尝试使用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

        {{item.title}}
 

luisgabriel.. 18

我想你可以用更像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())
}

bertrandg.. 5

我不认为嵌套可观察的xhr调用是一个好习惯...但我不是它的专家,也不能告诉你为什么你得到这个异常(也许关于这个that变量..).

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

第一个组件加载id列表,然后为每个组件生成其他组件:

@Component({
  selector: 'top-stories',
  providers: [],
  template: '
    

      
Hacker news top stories:
      

        

      
    
  ',
  directives: [TopStory]
})
export class TopStories {
  list: Observable>;

  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));
  }
}

组件加载自身发布详细信息并显示它:

@Component({
  selector: '[top-story]',
  providers: [],
  template: `
    

      {{ num + ': ' + item?.title }}
      loading...
    
  `,
  directives: []
})
export class TopStory implements OnInit, OnDestroy {
  @Input() num: Number;
  @Input() id: Number;

  sub: any;
  item: object;

  constructor(private http: Http) {}

  ngOnInit() {
    this.sub = this.http.get('https://hacker-news.firebaseio.com/v0/item/' + this.id + '.json')
    .map(res => res.json())
    .subscribe(item => this.item = item);
  }

  ngOnDestroy() {
    this.sub.unsubscribe();
  }
}

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

我想你可以用更像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())
}

我不认为嵌套可观察的xhr调用是一个好习惯...但我不是它的专家,也不能告诉你为什么你得到这个异常(也许关于这个that变量..).

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

第一个组件加载id列表,然后为每个组件生成其他组件:

@Component({
  selector: 'top-stories',
  providers: [],
  template: '
    

      
Hacker news top stories:
      

        

      
    
  ',
  directives: [TopStory]
})
export class TopStories {
  list: Observable>;

  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));
  }
}

组件加载自身发布详细信息并显示它:

@Component({
  selector: '[top-story]',
  providers: [],
  template: `
    

      {{ num + ': ' + item?.title }}
      loading...
    
  `,
  directives: []
})
export class TopStory implements OnInit, OnDestroy {
  @Input() num: Number;
  @Input() id: Number;

  sub: any;
  item: object;

  constructor(private http: Http) {}

  ngOnInit() {
    this.sub = this.http.get('https://hacker-news.firebaseio.com/v0/item/' + this.id + '.json')
    .map(res => res.json())
    .subscribe(item => this.item = item);
  }

  ngOnDestroy() {
    this.sub.unsubscribe();
  }
}

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