rxjs - Angular 6 中的链接 HttpClient 调用

Question

我想我已经阅读了 100 多篇关于该主题的文章，但我仍然无法弄清楚如何在 Angular 6 中使用 rxjs 链接两个 HttpClient 调用。

假设我有一个具有该签名的服务:

  GeoService {
      getState(): Observable<string> {
          return this.http.get<string>(stateURL);
      }
      getCities(state: string): Observable<string[]> {
          return this.http.get<string[]>(citiesURL + state);
      }
   }

我一生都无法弄清楚如何获取组件中的州和相应的城市列表:

import { Observable } from 'rxjs';
import { map, flatMap, mergeMap, filter, switchMap } from 'rxjs/operators';

...

 ngOnInit() {

      this.svc.getState().
        pipe(map((state) => {
            this.state = state;
            return this.svc.getCities(state);
          }),
          mergeMap((cities) => this.cities = cities))
        ).
        subscribe(console.log('done'));

上面的代码是我以我能想到的各种方式组合 pipeline/map/mergeMap/subscribe 的 20 次随机尝试之一......如果有一个有效的示例，我将非常感激:)

谢谢!

编辑:“可能重复”的帖子都不包含有效的实际示例

Answer 1

第 21 次尝试是正确的;-)

this.svc.getState().
    pipe(mergeMap((state) => {
        this.state = state;
        return this.svc.getCities(state);
    }),
    tap((cities) => this.cities = cities)))
.subscribe(() => console.log('done'));

链接的 Observable 进入 mergeMap 内部。您可以将其视为:

First, map the incoming notifaction to an Observable, then merge the resulting "inner" Observable into the "outer" Observable

此外，如果您打算更改外部状态，请使用 tap 而不是 map。