angular – 多个可观察的一起工作

car

结果将是：

[
  {
    id: "1"
    name: "Ferrari"
  },{
    id: "2"
    name: "Porsche"
  }
]

这个我能够成功,这是如何：

class WordComponent {
  word: Subject<string> = new Subject<string>();
  result: any[] = [];

  constructor(private http: Http) {
    this.subscribe();
  }

  subscribe(): void {
    this.word.debounceTime(400)
      .distinctUntilChanged()
      .switchMap((word: string): Observable<any[]> => this.http.get(word))
      .subscribe((result: any[]): any[] => this.result = result);
  }

  search(event: any): void {
    this.word.next(event.target.value);
  }

}

并且观点：

<input type="text" placeholder="Word" (keyup)="search($event)">

我希望用户能够同时键入多个单词并分别对每个单词进行实时搜索.例如,假设他搜索了以下内容：

car food sun

汽车的结果将是：

[
  {
    id: "1"
    name: "Ferrari"
  },{
    id: "2"
    name: "Porsche"
  }
]

食物的结果将是：

[
  {
    id: "3"
    name: "egg"
  },{
    id: "4"
    name: "cheese"
  }
]

太阳的结果将是：

[
  {
    id: "5"
    name: "star"
  },{
    id: "6"
    name: "sky"
  }
]

并且还合并每个单词的结果,在这种情况下它看起来像这样：

[
  [{
      id: "1"
      name: "Ferrari"
    },{
      id: "2"
      name: "Porsche"
    }
  ],[{
      id: "3"
      name: "egg"
    },{
      id: "4"
      name: "cheese"
    }
  ],[{
      id: "5"
      name: "star"
    },{
      id: "6"
      name: "sky"
    }
  ]
]

但是,让我们说用户在输入所有单词并执行搜索后,希望更改其中一个.只需要重新搜索已更改的单词,并且必须重做最终结果的合并.

我仍然不知道rxjs的所有功能,我不知道实现这一目标的理想方法是什么.如果你想要一个参考,Display Purposes网站有一个非常相似的搜索引擎.