Как манипулировать списком элементов из Observable со значением другого Observable

Question

Вот моя проблема.

Предположим, у меня есть наблюдаемая со списком стран, а другая наблюдаемая возвращает значение в соответствии с ключом.

interface CountryCode {
 id: number;
 code: string;
}

interface Country implements CountryCode {
 name: string;
}

public getCountries():Observable<CountryCode[]>{
    return Observable.of([{id:1,code:'fr'},{id:2,code:'en'}];
}

public getTrad(key: string):Observable<string> {
    const trad = {fr: 'France',en: 'Angleterre'};
    return Observable.of(trad[key]);
}

Как мне сделать, чтобы в конце:

[{id:1, name:'France', code:'fr'},{id:2, name:'Angleterre', code:'en'}]

Моя проблема в том, чтобы работать со вторым наблюдаемым.

    const countries$: Observable<Country[]> = this.getCountries()
        .map(items => items.map(
             item => assign(item, {name: this.getTrad(item.code)}))); //wont work

Это не работает, потому что у меня есть ScalarObservable

Answer 1

Вы можете сделать это следующим образом:

import { flatMap, mergeMap, toArray } from 'rxjs/operators';

const countries$: Observable<Country[]> = this.getCountries()
        .pipe(
          // flatten the array in order to operate with the singular elements
          // note that `flatMap` is just an alias for `mergeMap`
          flatMap(countryCodes => countryCodes),
          // combine the source observable, a country code, with 
          // another observable
          mergeMap(countryCode => this.getTrad(countryCode.code)
             .pipe(map(name => ({name, ...countryCode})))),
          // collect the single elements into a new array
          toArray()
        );