使用 Angular2 搜索 2 个主题 observables答案

【问题标题】：Search with Angular2 using 2 subject observables使用 Angular2 搜索 2 个主题 observables
【发布时间】：2017-01-16 18:43:51
【问题描述】：

一旦每个主题的去抖动时间完成，我想合并 2 个主题 observables。我想将每个主题的 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());
         });
     }
   }

当我在第一个输入字段中输入值时，我尝试的第二个 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，所以任何帮助都将不胜感激。

【问题讨论】：

为什么要将concurent 传递给merge 方法。据我所知，它只接受 Obervables。
@chrigu 我看到在我正在阅读的教程中，显然，并发可以使可观察对象同时同时运行。
在docs 中找到它，它看起来是可选的，所以它应该不会造成任何伤害。

标签： angular merge rxjs observable

【解决方案1】：

看起来您的 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());
    });
}

【讨论】：