3

ページ分割された形式でデータを提供する angular2 アプリから外部 API を呼び出しています。レスポンスはこんな感じ

{
   next: "next_url",
   results: []
}

Observable を返す Rxjs または Angular2 の組み込みの Http クラスを使用して、次の URL からの結果を連結することはできますか?

{
   next: null,
   results: []
}

concatMap 演算子を使用する必要があると感じていますが、Reactive Extentions を初めて使用するため、構文がわかりません。

4

2 に答える 2

5

これが私がそれを行う方法です：

import {Component} from 'angular2/core';
import {Observable} from 'rxjs/Observable';
import 'rxjs/Rx';

@Component({
  selector: 'my-app',
  template: `<h2>Results: {{out | async | json}}</h2>`,
})
export class App {
  constructor() { 
    this.out = this.getAllResults();
  }

  getAllResults(startIdx = 0) {
    return this.getData(startIdx)
      .concatMap(data => {
        if (data.next) {
          return this.getAllResults(data.next)
            .map(resultsToJoin => [...data.results, ...resultsToJoin]);
        } else {
          return Observable.of(data.results);
        }
      });
  }

  // pretend this is our http call 
  getData(idx : number) {
    const data = [{
        next: 1,
        results: [1, 2]
      }, {
        next: 2,
        results: [3, 4]
      }, {
        next: null,
        results: [5, 6]
    }];

    return Observable.of(data[idx]);
  } 
}

http://plnkr.co/edit/7r4TaW

于 2016-01-01T12:26:06.760 に答える