Question

我有2个主题可观察者，我想在每个主题的去抖时间完成后合并。我想将每个主题的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，所以任何帮助将不胜感激。

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

使用2个主题可观察量使用Angular2进行搜索

1 个答案: