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***

  }

合并运算符两次发出值，一次针对第一个观察者，然后针对第二位观察员。列表将首先显示第一组并使用新项目覆盖旧项目。我想合并只发出一次所有数据。任何想法？

Answer 1

您可以使用forkJoin方法连接多个observable，这是rxjs库

 // 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

感谢Pramod Patil。我是如何解决的

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

合并两个可观察的

2 个答案: