使用2個主題observables搜索Angular2

我有2個主題observables，我想合併一旦每個主題的debounce時間完成。我想將每個主題的2個輸入字符串發送到服務，然後合併結果並將其顯示給用戶。使用2個主題observables搜索Angular2

到目前爲止，我具有低於下面的代碼：

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

與第二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)

我仍然試圖包圍我的頭觀察周圍請所以任何幫助將不勝感激。

來源

2017-01-16 user875139

爲什麼你將'concurent'傳遞給'merge'方法。據我所知，它只接受Obervables。 – chrigu

@chrigu我看到在我正在閱讀的教程中，顯然，併發使觀察對象能夠同時運行。 – user875139

在[docs]中找到它（http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#static-method-merge）看起來它是可選的，所以它不應該有任何傷害。 – chrigu

它看起來像你的searchForStuff方法不會返回任何東西，因爲你只記錄響應，不要傳遞它。在map方法中，你需要返回一個值爲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()); 
    }); 
}

來源

2017-01-16 19:27:39 chrigu

使用2個主題observables搜索Angular2

回答

相關問題