Angular2 / Typescript将两个可观察对象“映射”到一个接口

Question

我在将两个数据源合并到一个界面时遇到了一个小问题

有一个接口

export interface IProvince {
  code: number;
  name: string;
  svgData: string;
  part: number;
  color: string;
}

现在我有两个不同的数据源，一个为我提供字段数据：[code, name, svgData, part], [color] 来自另一个 observable。

getAllProvince(): Observable<IProvince[]>
  {
    return <Observable<IProvince[]>>this.http
      .get('url')
      .map((response: Response) => <IProvince[]>response.
      .catch(this.handleError)
      .finally(() => {
        this.loader.complete();
        console.log("Data: ", this.provinceData);
      });

  }
  getLegendData(): Observable<ILegend[]> {
    return Observable.of(this.legendData);
  }

  getStyleColorData(part: number) {
    let color: ILegend;
    return this.getLegendData().subscribe((items: ILegend[]) => color = items.find(p => p.part == part));
  }

问题是目前我缺少数据 [color] 我不知道如何“即时”从另一个函数中添加值。

这里我有函数：getStyleColorData(part: number) 在我从 [getAllProvince()] 传递 [part] 之后应该给我“颜色”。 问题：有一种简单的方法可以将这两者结合起来，或者我走错了方向？

发送答案和解决方案:)

Answer 1

如果您有两个 Observable（例如来自 http 请求，您可以将它们与 Observable.combineLatest 或 Observable.withLatestFrom 结合使用。

试试这样的：

getProvinces() {
  return this.http
    .get('url')
    .map(response => response.json() as IProvince[])
    .withLatestFrom(this.getLegendData(), (provinces, legendData) => ({provinces, legendData})
    .map(combined => combined.provinces.map(
            province => province.color = combined.legendData.find(legend => legend.part == province.part).color));
}

getLegendData() {
  return this.http
    .get('url2')
    .map(response => response.json() as ILegend[]);
}