角英雄教程中2搜索怎么合并？

Question

使用Angular 2/4英雄之旅教程来说明这种情况，该教程使用一个可观察的按“name”值搜索英雄(https://Angular.io/tutorial/toh-pt6#add-the-ability-to-search-by-name）。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 { 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[]);
  }
}

我需要做的相当于为Hero类添加第二个“synonym”字符串值：

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

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

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

在这里如何使用RxJS合并？

是否有其他使用RxJS的方法更合适？

在Hero类的级别上是否有其他方法可以工作，比如计算namePlusSynonym，而不必向Hero数组中的每一行添加namePlusSynonym？

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

  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

要使merge运算符工作，您需要从rxjs导入Observable and merge，就像在plunker中一样：

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

在这里如何使用RxJS合并？

我认为您在这里的主要误解是，对一个可观察性调用merge()会返回一个新的合并的可观察性。由于rxjs函数是纯函数，在这里调用它不会改变namedresults

nameResults.merge(synonymResults);

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

这就是我如何解决这个问题（此处为plunker)，使它在不改变现有angular组件的情况下工作，只改变hero-search.service.ts。您可以通过将运算符链接在一起使其看起来更好，但我认为在每个阶段看到有用的变量名和类型对学习非常有帮助。您可以将一个中间的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;
}

但是当我尝试这样的代码时，我得到了一个标记错误:找不到名称'rx'

如果您不关心不必要地导入您不使用的东西，您可以使用这个

import * as Rx from 'rxjs/Rx';