typescript - 反復可能な配列を使用した Angular 2 連鎖 Http Get リクエスト

Question

Observable http シーケンスのヘルプを探して、API に対して 2 つの http 呼び出しを行いたいと考えています。2 番目は最初の呼び出しに依存しています。1 つ目は URL の配列を返し、2 つ目はその配列内のすべての URL に対して取得要求を行い、ストリームで応答を返します。依存するリクエストの 1 つを次のようにハードコーディングすると、探しているタイトルの 1 つが返されます。

search(character): Observable<any> {
let that = this
let queryUrl: string = character.url;
return this.http.get(queryUrl)
  .map((response: Response) => {
    this.characterResults = response.json().films
    return this.characterResults
        //Example response: 
        // ["https://api.com/films/1", "https://api.com/films/2", "https://api.com/films/3", "https://api.com/films/4"]
  })
  .flatMap((film) => {
    return that.http.get(film[0])
    .map((response: Response) => {
      return response.json().title
    })
  })
}

getApiData(character) {
    this.apiService.search(character)
    .subscribe((results) => { // on sucesss
          console.log(results)
        },
        (err: any) => { // on error
          console.log(err);
        },
        () => { // on completion
          console.log('complete')
        }
      );

しかし、その配列に対して forEach を使用して反復し、すべての http 呼び出しを実行しようとすると、次のエラーが発生します。

browser_adapter.js:84 EXCEPTION: TypeError: Cannot read property 'Symbol(Symbol.iterator)' of undefined

理想的には、最初の呼び出しからの結果配列と並行してこれらの後続の呼び出しを行うためのエレガントな方法が必要ですが、rxJs の数十のメソッドのどれがそれを行うのに役立つかを理解できないようです。誰でも私に助けを提供できますか？