如何将可观察到的属性添加到第二个可观察的属性？

Question

我正在尝试将可观察到的地址添加到可观察的用户。

export interface Address {
 country: string;
 state: string;
 city: string;
 street: string;
 zipCode: number;
}

export interface User {
 id: number;
 name: string;
 address?: Address;
}

操作代码是：

// Observables - declaration
let users$: Observable<User[]>;
let address$: Observable<Address[]>;

// Observables - assignation
users$ = of(users);
address$ = of(address);

const getUser = (userId: number) => of(users[userId]);

users$ = address$.pipe(
 switchMap((address: Address[]) => {
    const userArray$: Observable<User>[] = [];
    address.forEach((add, index) => {
      const user$: Observable<User> = getUser(index).pipe(
        map((user$) => ({...user$, address: add})),
        tap(userArray$ => console.log('Alla',userArray$))
      )
      userArray$.push(user$)
      tap(userArray$ => console.log('Allb',userArray$))  
    })
    return forkJoin(userArray$);
  })
 
)

// Subscription
users$.subscribe(() => console.log(users))

几个问题：

1. 为什么用户$订阅没有地址对象？
2. 为什么第一个点击执行并显示第二个点击似乎没有执行时显示地址对象？
3. Concatmap是正确的映射操作员吗？

a “ nofollow noreferrer”> stackblitz 在此处提供。

Answer 1

为什么用户$订阅没有地址对象？

问题中的代码与Stackblitz中的代码有一些显着差异。有了您的问题中的代码，它 do 具有地址对象。使用Stackblitz中的代码，其没有地址对象的原因是您仅使用getUser（index）而没有修改。您在73上定义了一个看起来像映射功能的函数，但是您没有将其传递到MAP中

为什么第一个点击执行并显示第二个点击似乎没有执行的地址对象？

第二个点击在自己的行上，而不是管道的一部分。调用TAP自己做得太多。 IT（和其他操作员）返回了您希望修改的可观察到的行为的描述，但是您需要将其传递到.pipe中以创建新的观察值。

condmap是正确的映射操作员吗？

您的情况很简单（所有源可观察物都是同步的，只发出一个值）SwitchMap，concatmap和Mergemap都会产生相同的结果。对于更复杂的情况，多个值随时间分布，这就是不同的区别：

con缩图：当源可观察到的第一个值发射时，我们开始在第一个映射的可观察到。在我们继续前进的源可观察的第二个值之前，必须完成第一个可观察到的。当您需要确保一切按确切顺序发生，而没有任何早期终止时，ConcatMap就很有用。但是，如果您的观察力永无止境，这将阻止其他可观察到的跑步。

SwitchMap：发出第一个值时，我们开始在第一个映射的可观察到。只要源没有更多的值，这将持续下去，但是一旦从源中发出新值，我们将取消第一个映射的可观察到的值，然后切换到第二个。在新值表明我们需要停止工作并重新开始的情况下，SwitchMap很有用。

Mergemap：任何时候发出值时，我们也会在其映射的可观察到。多个映射的可观察物将以任何恰好到达的顺序发出值，而不会取消任何顺序。当您不关心订单时，Mergemap就很有用，并且只想按照它们到达的顺序进行处理。

Answer 2

基于您更新的stackblitz，您未在最终可观察到的地址中未包含的地址的原因是因为您没有在subscribe中添加数据

//before
users$.subscribe((/*no Data from the source*/) => console.log(users))

//after
users$.subscribe((withAddress) => console.log(withAddress))