如何在Angular Heroes教程中合并2个搜索？

Question

我想在Angular/TypeScript中合并2个HTTP获取搜索，但我无法正常工作。

使用Angular 2/4 Tour of Heroes教程来说明情况，该教程使用Observable通过“name”值搜索英雄（https://angular.io/tutorial/toh-pt6#add-the-ability-to-search-by-name）。在英雄search.service.ts的代码如下：

import { Injectable } from '@angular/core'; 
import { Http }  from '@angular/http'; 

import { Observable }  from 'rxjs/Observable'; 
import 'rxjs/add/operator/map'; 

import { Hero }   from './hero'; 

@Injectable() 
export class HeroSearchService { 

    constructor(private http: Http) {} 

    search(term: string): Observable<Hero[]> { 
    return this.http 
       .get(`api/heroes/?name=${term}`) 
       .map(response => response.json().data as Hero[]); 
    } 
} 

我需要做添加第二个字符串值“代名词”的英雄类相当于：

export class Hero { 
    id: number; 
    name: string; 
    synonym: string; 
} 

和代

import { InMemoryDbService } from 'angular-in-memory-web-api'; 
export class InMemoryDataService implements InMemoryDbService { 
    createDb() { 
    const heroes = [ 
     { id: 0, name: 'Zero', synonym: 'little' }, 
     { id: 11, name: 'Mr. Nice', synonym: 'pleasant' }, 
     { id: 12, name: 'Narco', synonym: 'sleep' }, 
     { id: 13, name: 'Bombasto', synonym: 'loud' }, 
     { id: 14, name: 'Celeritas', synonym: 'vegetable' }, 
     { id: 15, name: 'Magneta', synonym: 'color' }, 
     { id: 16, name: 'RubberMan', synonym: 'hose' }, 
     { id: 17, name: 'Dynama', synonym: 'motor' }, 
     { id: 18, name: 'Dr IQ', synonym: 'smart' }, 
     { id: 19, name: 'Magma', synonym: 'volcanic' }, 
     { id: 20, name: 'Tornado', synonym: 'wind' } 
    ]; 
    return {heroes}; 
    } 
} 

我可以在英雄search.service.ts的同义词，然后搜索：添加一个同义词每个英雄

 .get(`api/heroes/?synonym=${term}`) 

我的问题是如何搜索名称和同义词，并返回匹配名称或同义词。

从ReactiveX文档看来，答案似乎是使用合并运算符：http://reactivex.io/documentation/operators/merge.html。但是，我无法使其工作。我试着使用合并，包括上面的英雄search.service.ts代码以下新版本的各种方式：

import { Injectable } from '@angular/core'; 
import { Http }  from '@angular/http'; 

import { Observable }  from 'rxjs/Observable'; 
import 'rxjs/add/operator/map'; 
import 'rxjs/add/operator/merge'; 

import { Hero }   from './hero'; 

@Injectable() 
export class HeroSearchService { 

    constructor(private http: Http) {} 

    search(term: string): Observable<Hero[]> { 
    const nameResults = this.http.get(`api/heroes/?name=${term}`); 
    const synonymResults = this.http.get(`api/heroes/?synonym=${term}`);  
    nameResults.merge(synonymResults); 
    return nameResults.map(response => response.json().data as Hero[]); 
    } 
} 

的未工作，妥善代码为https://plnkr.co/edit/4mrL5ReQCSvuzOODixJU?p=preview。

我没有看到任何合并成功的证据，并且nameResults仅给出名称，而不给出同义词。没有错误消息出现。

在http://reactivex.io/documentation/operators/merge.html的RxJS代码使用形式

const mergedResults = Rx.Observable.merge(nameResults, synonymResults); 

的代码，但是当我尝试这样的代码我得到一个错误标记：

找不到名称 'RX'

所以我的问题是：

如何使用RxJS merg在这里？

有没有其他方法使用RxJS更适合？

有没有其他的方法可以在Hero类中工作，比如计算namePlusSynonym而不必为Hero数组中的每一行添加namePlusSynonym？

附录：下面的建议和代码在http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-merge我用控制台输出创建了一个新版本的hero-search.service.ts。

import { Injectable } from '@angular/core'; 
import { Http } from '@angular/http'; 

import { Observable } from 'rxjs/Observable'; 
import 'rxjs/add/operator/map'; 
import 'rxjs/add/operator/merge'; 

import { Hero } from './hero'; 

@Injectable() 
export class HeroSearchService { 

    constructor(private http: Http) {} 

    search(term: string): Observable<Hero[]> { 
    const nameResults = this.http.get(`api/heroes/?name=${term}`); 
    nameResults.subscribe(nameData => console.log('nameData', nameData)); 
    const synonymResults = this.http.get(`api/heroes/?synonym=${term}`); 
    synonymResults.subscribe(synonymData => console.log('synonymData', synonymData)); 
    const combinedResults = nameResults.merge(synonymResults); 
    combinedResults.subscribe(combinedData => console.log('combinedData', combinedData)); 
    return combinedResults.map(response => response.json().data as Hero[]); 
    } 
} 

但它只显示synonymResults，而不是nameResults。 nameResults和synonymResults在控制台输出中对我看起来不错，但combinedResults只有数据和同义词结果的URL，并且似乎不受合并方法的影响。

我也尝试与concat，具有类似的结果。

看来，我不是在合适的阶段组合，但在不同阶段结合的结果相同，只显示同义词：

search(term: string): Observable<Hero[]> { 
    const nameResults = this.http.get(`api/heroes/?name=${term}`).map(response => response.json().data as Hero[]); 
    nameResults.subscribe(nameData => console.log('nameData', nameData)); 
    const synonymResults = this.http.get(`api/heroes/?synonym=${term}`).map(response => response.json().data as Hero[]); 
    synonymResults.subscribe(synonymData => console.log('synonymData', synonymData)); 
    const combinedResults = nameResults.merge(synonymResults); 
    combinedResults.subscribe(combinedData => console.log('combinedData', combinedData)); 
    return combinedResults; 
    } 

Answer 1

要获得合并运营工作，你需要导入观察到的，从rxjs合并，只是因为它是在plunker：

import { Observable } from 'rxjs/Observable'; 
import 'rxjs/add/operator/merge'; 

如何使用一个在这里RxJS合并？

我觉得这里你的主要的误解是，呼吁可观察到的回报新的合并观察到merge()。由于rxjs功能pure，称它在这里没有发生变异namedResults

nameResults.merge(synonymResults); 

相反，你应该捕获结果在一个新的常数

const combinedResults = nameResults.merge(synonymResults); 
return combinedResults; 

是否有使用RxJS是比较一些其他的办法适当？

这是我如何解决得到它不改变现有角分量的工作，只有改变hero-search.service.ts问题（plunker here）。通过将操作符链接在一起，可以让这看起来更好看，但我认为在每个阶段查看有用的变量名称和类型对学习非常有帮助。您可以在任何可观测值上放置中间值subscribe() & console.log()以进行测试，以查看该值的实际外观。

search(term: string): Observable<Hero[]> { 
    // get the response observable from requesting the backend  
    const nameResults: Response = this.http.get(`api/heroes/?name=${term}`); 
    // boil that response down to just the data array we care about 
    const nameResultsArr: Observable<Hero[]> = nameResults.map(res => res.json().data); 
    // do the same for the synonym request 
    const synonymResults: Response = this.http.get(`api/heroes/?synonym=${term}`); 
    const synonymResultsArr: Observable<Hero[]> = synonymResults.map(res => res.json().data); 

    // combine the two observable arrays into a stream of arrays 
    const combinedHeroListObservables: Observable<Hero[]> = 
    nameResultsArr.merge(synonymResultsArr); 
    // concat the observable arrays onto each other 
    const concatenatedArrays: Observable<Hero[]> = 
    combinedHeroListObservables.reduce((accumulator, current) => accumulator.concat(current)); 

    // return the combined array 
    return concatenatedArrays; 
} 

但是当我尝试这样的代码，我得到标志的错误： Cannot find name 'Rx'

如果你不关心不必要导入你不使用的东西，你能得到这个使用

import * as Rx from 'rxjs/Rx'; 

但是，最好的做法是只导入您需要的运算符/类型，如plunker示例中所示。

PS：就像在评论中说的一样，有一条休息路线可以返回两个结合的结果，所以客户端不必向服务器进行两次往返。但是，你不能这么做，因为你正在使用Angular团队的例子。