使用角度 rxjs 中的另一个可观察对象从一个可观察对象转换数据答案

【问题标题】：Transform data from one observable using another observable in angular rxjs使用角度 rxjs 中的另一个可观察对象从一个可观察对象转换数据
【发布时间】：2021-05-12 09:27:54
【问题描述】：

我有两个可观察的：城市和地址。在我的addresses 数组中，我有一个对象，其属性city_code 有一个值，而属性city 为空。在 cities 我有两个属性的对象。

如何转换addresses 中的数据？我想通过匹配city_code 从cities 数组中获取city 的值，并将该值放入addresses 中的相应对象中。

addresses$ = this.store.select(getAddresses);
cities$ = this.citiesFacade.allCities$;

function getAddressesWithCityName() {
   // some code here
}

地址和城市：

export interface Address {
   city_code: string;
   city: string; // in addresses$ this property is empty and I should get it from cities$
}

export interface City{
   city_code: string;
   city: string;
}

【问题讨论】：

标签： angular typescript rxjs rxjs-observables

【解决方案1】：

您可以使用combineLatest() 创建一个基于多个源流始终保持最新的可观察流。

那么，你可以简单地定义addresses$如下，不需要getAddressesWithCityName()方法：

addresses$ = combineLatest([this.store.select(getAddresses), this.cities$]).pipe(
    map(([addresses, cities]) => addresses.map(a => {
        const city = cities.find(c => c.city_code === a.city_code)?.city;
        return { ...a, city };
    })
);

【讨论】：

【解决方案2】：

你可以试试这样的：

    function getAddressesWithCityName(): Observable<Address[]> {
      return forkJoin([addresses$, cities$])
        .pipe(map((results: [Address[], City[]]) => {
          results[0]
            .forEach((address: Address) => address.city = (results[1]
              .find((city: City) => city.city_code === address.city_code) as City)?.city);
          return results[0];
        }));
    }

【讨论】：