Angular2で2件の被験者観測を使用して検索

Question

各被験者のデバウンス時間が完了すると、2件のSubject観測値がマージされます。私は、それぞれの件名の2つの入力文字列をサービスに送り、結果をマージしてユーザーに表示したいと思います。

はこれまでのところ、私は、以下、次のコードを持っている：

export class SearchComponent{ 
    private _results = Observable<any>(); 
    private _search1Field = new Subject<any>(); 
    private _search2Field = new Subject<any>(); 

    //following the example from the angular2 heroes app, I have replicated how i will watch one input observable and get results 
    // ngOnInit(){ 
    // this._search1Field 
    //  .debounceTime(500) 
    //  .distinctUntilChanged() 
    //  .switchMap(term => { 
    //  if(term){ 
    //   return this.searchForStuff(term); 
    //  } else { 
    //   return []; 
    //  } 
    //  }) 
    //  .subscribe(results => { 
    //  this._results = results; 
    //  }) 
    // } 

    //this is the actual approach i am trying to take for both merge 
    ngOnInit(){ 
     let firstSearch = this._search1Field.debounceTime(500).distinctUntilChanged(); 
     let secondSearch = this._search2Field.debounceTime(500).distinctUntilChanged(); 
     let concurrent = 2; 
     let combinedSearch = Observable.merge(firstSearch,secondSearch, concurrent); 
     combinedSearch 
     .mergeMap(test=> { 
      if(test){ 
       console.log('searched for ', test); 
       // send search with strings from each observable 
      return this.searchForStuff(test.firstParam, test.secondParam); 
      } else { 
       console.log('return nothing'); 
       return []; 
      } 
     }) 
     .subscribe(result => { 
      console.log(`Result is ${result}`); 
     }) 
    } 

    searchFromTemplate(search1: string, search2?: string) { 
     this._search1Field.next(search1); 
     this._search2Field.next(search2); 
    } 

    searchForStuff(firstInputSearch: string, secondInputSearch?: string): Observable<any> { 
     let requestOptions = new RequestOptions({ 
     method: RequestMethod.Post, 
     headers: this._headers, 
     body: '', 
     url: `${this.url}?first=${firstInputSearch}&second=${secondInputSearch}` 
     }); 

     //get params from url search as well 

     return this._http.request(searchUrl, requestOptions) 
     .map(res=> console.log(`This is res json ${res.json()}`)) 
     .catch(error=> { 
      console.log(`There was an error ${error}`); 
      return Observable.throw(error.json()); 
     }); 
    } 
    } 

iは最初の入力フィールドに値を入力すると、私はリターンにこのエラーを試みた第ngOnInitの方法の問題：

EXCEPTION: Cannot read property 'Symbol(Symbol.iterator)' of undefined 
TypeError: Cannot read property 'Symbol(Symbol.iterator)' of undefined 
    at Object.subscribeToResult (subscribeToResult.js:45) 
    at MergeMapSubscriber._innerSub (mergeMap.js:120) 
    at MergeMapSubscriber._tryNext (mergeMap.js:117) 
    at MergeMapSubscriber._next (mergeMap.js:100) 
    at MergeMapSubscriber.Subscriber.next (Subscriber.js:89) 
    at MergeAllSubscriber.OuterSubscriber.notifyNext (OuterSubscriber.js:19) 
    at InnerSubscriber._next (InnerSubscriber.js:23) 
    at InnerSubscriber.Subscriber.next (Subscriber.js:89) 
    at DistinctUntilChangedSubscriber._next (distinctUntilChanged.js:72) 
    at DistinctUntilChangedSubscriber.Subscriber.next (Subscriber.js:89) 

私はObservablesの周りに私の頭を包み込むように努力していますので、どんな助けでも大歓迎です。

Answer 1

あなたのsearchForStuffメソッドは応答をログに記録して渡すだけで何も返されないようです。 メソッドでは、console.log()はあなたが見ている可能性の高いundefinedを返すだけなので、値を返す必要があります。

searchForStuff(firstInputSearch: string, secondInputSearch?: string): Observable<any> { 
    let requestOptions = new RequestOptions({ 
     method: RequestMethod.Post, 
     headers: this._headers, 
     body: '', 
     url: `${this.url}?first=${firstInputSearch}&second=${secondInputSearch}` 
    }); 

    //get params from url search as well 

    return this._http.request(searchUrl, requestOptions) 
     .do(res=> console.log(`This is res json ${res.json()}`)) 
     .map(res => res.json()) 
     .catch(error=> { 
      console.log(`There was an error ${error}`); 
      return Observable.throw(error.json()); 
    }); 
}