合并两个observerable

Question

使用的技术- Angular 4，rxjs试图实现-从两个不同的服务器(json响应)获取数据，合并数据并通过将列表与可观察的数组绑定在列表中显示。

**Search component TS** 

    @Component({
      selector: 'word-search',
      templateUrl: 'wordSearch.component.html',
     })
    export class WordSearchComponent {
      term = new FormControl();
      items: Observable<Array<string>>;

      constructor(private wikipediaService: WikipediaService) { }
      ngOnInit() {
        this.items = this.term.valueChanges
          .debounceTime(1000)
          .distinctUntilChanged()
          .switchMap(term => this.wikipediaService.search(term));

        }  
    }

*****Search component chtml***** 

    <div>
        <h2>Search</h2>
        <input type="text" [formControl]="term"/>
        <ul>
      <li *ngFor="let item of items|async ">{{item}}</li>

        </ul>
      </div>

服务代码-问题出现在这里

getWikipediaObserver(term:string):Observable<any>
  {
    var wikipediaUrl = 'http://en.wikipedia.org/w/api.php?callback=JSONP_CALLBACK';

      var search = new URLSearchParams()
      search.set('action', 'opensearch');
      search.set('search', term);
      search.set('format', 'json');

      return this.jsonp
        .get(wikipediaUrl, { search })
        .map((request) => request.json()[1]).catch(this.handleError);


  }
  getItuneObserver(term: string)
  {
    var secondUrl = 'https://itunes.apple.com/search?callback=JSONP_CALLBACK&limit=20';
    var search = new URLSearchParams()
    search.set('term', term);
    search.set('format', 'json');


    var ituneObserver = this.jsonp
      .request(secondUrl, { search })
      .map((request) => request.json().results.map(item => {
        return item.trackName + " " +item.collectionCensoredName+" " +item.artistName;
      })).catch(this.handleError); 

      return ituneObserver;
  }

  search(term: string): Observable<any> {
   var observer1= this.getItuneObserver(term);
   var observer2= this.getWikipediaObserver(term);
   return merge(observer1,observer2); ***//PROBLEM***

  }

合并运算符发送值两次，第一个观察者一次，第二个观察者一次。List将首先显示第一个集合，并用新项目覆盖旧项目。我想合并发出所有的数据只有once.Any的想法？

Answer 1

您可以使用rxjs库中的forkJoin方法连接多个观察值。

 // import { forkJoin } from 'rxjs/observable/forkJoin';

 forkJoin(
  this.this.getItuneObserver(term),
  this.getWikipediaObserver(term)
)
.subscribe(([res1, res2]) => {
  this.propOne = res1;
  this.propTwo = res2;
});

Answer 2

谢谢普拉莫德·帕蒂尔。我是如何解决的

  search(term: string) {

    const combined =forkJoin(
     this.getItuneObserver(term),
    this.getWikipediaObserver(term)
  );

  return combined;


  }

在component.ts中订阅

    import { of } from 'rxjs/observable/of';
   export class WordSearchComponent {
          term = new FormControl();

         items: Observable<Array<string>>;
          result: string[] = [];
          ngOnInit() {

            var combined=this.term.valueChanges
              .debounceTime(1000)
              .distinctUntilChanged()
              .switchMap(term => this.wikipediaService.search(term));

              combined.subscribe(latestValues => {
               const [ response1 , response2 ] = latestValues;
               this.result=this.result.concat(response1);
               this.result=this.result.concat(response2);
               this.items = of(this.result);
           });
}