用于嵌套 api 调用的 Angular 6 mergeMap答案

【问题标题】：Angular 6 mergeMap for nested api calls用于嵌套 api 调用的 Angular 6 mergeMap
【发布时间】：2019-09-19 07:34:20
【问题描述】：

使用传统的可观察/订阅模式，我试图获取客户列表，每个客户都会使用 client.id 获取他们的帐户列表

看起来是这样的：

this.httpService.getClients().subscribe(clients => {
    clients.forEach(client => {
        this.httpService.getClientAccount(client.id).subscribe(accounts => {
            console.log(accounts);
        });
    });
});

现在我正在尝试使用mergeMap 来做到这一点。我认为我做的不正确，因为当我将 client.id 传递给第二个调用时，它显示为未定义。

this.httpService.getClients().pipe(
    mergeMap(client => this.httpService.getClientAccount(client.id))
).subscribe(result => console.log(result))

谁能指出我在这里做错了什么？我尝试使用 tap() 在 mergeMap 中对客户端进行控制台记录，但没有显示任何内容。我不确定如何引用第一个 getClients() 调用的响应。

【问题讨论】：

源 Observable 发出的对象仍然是一个客户端列表。
是的，我如何分别获得每个？我只是以第一种方式使用 forEach，但是如何使用 mergeMap 呢？
可能会考虑使用forkJoin 代替该场景。
@ChrisW。我仍然需要知道如何在上面的示例中使用它...
@TimKlein 没有在上面标记你

标签： javascript angular angular6 observable

【解决方案1】：

下面是 Chris W 上面提到的如何使用forkJoin 的示例：

const outerObservable = of([0, 1, 2, 3, 4]);

outerObservable.pipe(
    mergeMap(inputs => forkJoin(inputs.map(input => rxjs.of(input)))),
);

outerObservable.subscribe(console.log);

请参阅来自this page 的示例 3，以及有关如何使用字典方法的信息的示例 1。

【讨论】：

【解决方案2】：

我不确定这是否是正确的方法，但这会返回每个客户的每个帐户：

this.clientService.getAllClients().pipe(
    mergeMap(clients => clients)).pipe(
    mergeMap((client:any) => this.accountService.getClientAccts(client.id)))
    .subscribe(res=>console.log(res));

第一个 mergeMap 将 clients 数组展平到每个单独的客户端，我相信然后可以使用 client.id 进行第二次调用。

【讨论】：