Question

this._authService.loggedInUser$.pipe(switchMap((loggedInUser: LoggedInUser) => {
      return this._userSerialService.getUserSerial().pipe(switchMap(serial => {
          return this._usersService.getCurrentUser().pipe(switchMap(currentUser => [loggedInUser, currentUser, serial]));
        }),
      );
    })).subscribe(([loggedInUser, currentUser, serial]) => {

    });

以上代码尝试将3个可观察对象链接在一起，并使用switchMaps将其结果映射到数组。我在最终订阅中需要所有三个可观察值的结果值。但是，当我尝试以上述方式订阅时，出现编译器错误，提示“类型'LoggedInUser'必须具有返回迭代器的'Symbol.iterator'方法。

如果我执行subscribe(res => {}，则res最终仅是loggingInUser的值，而不是全部三个值。

我需要在代码中进行哪些更改以确保可以访问我的订阅中的所有三个值？

Answer 1

看起来好像不需要switchMap。 switchMap用于“切换”引擎盖下可观察到的源，以便可以将新的观察对象发射到流中。它处理从先前来源退订并订阅新来源。

就您而言，您可以简单地使用combineLatest。一旦所有源可观测对象都发出了一个值，它将发出所有3个值的数组，并且只要它们中的任何一个接收到新值，它将继续发出。

authUser$ = this._authService.loggedInUser$;
serial$   = this._userSerialService.getUserSerial();
user$     = this._usersService.getCurrentUser();

data$ = combineLatest([authUser$, serial$, user$]);


data$.subscribe(([loggedInUser, serial, currentUser]) => {
    ...
});

将值映射到对象可能很方便，因此很容易在模板中检索它们，例如：

data$ = combineLatest([authUser$, serial$, user$]).pipe(
    map(([authUser, serial, user]) => ({authUser, serial, user}))
);

如果您在模板中使用async pipe而不是订阅组件，这也很方便。

<div *ngIf="data$ | async as data">
    <ul>
        <li>Current User: {{ data.user }}</li>
        <li>Logged in User: {{ data.authUser }}</li>
        <li>User Serial: {{ data.serial }}</li>
    </ul>
</div>

Answer 2

'\b(?:' . join('|', map { quotemeta } keys %hash) . ')\b'运算符采用一个函数，该函数返回一个switchMap，然后订阅它。
这里的问题是，您的最后一个Observable获得了一个数组，而不是switchMap。
您可以改用Observable来转换数据。

map

不确定在哪里放置与switchMap链接的3个可观察对象的订阅

2 个答案: