如何组合父视图和依赖子视图

Posted 2021-04-18

有一连串的事件对象无法完成。每个活动都有乐队。通过订阅事件，您将获得具有多个属性的事件，其中包括存储bandIds数组的属性“bands”。有了这些ID，您就可以获得每个乐队。 （乐队的流也是连续的。）

问题：最后你不仅要拥有乐队，还要拥有带有bandIds和完整乐队对象的完整事件对象。

// This is what I could come up with myself, but it seems pretty ugly.

getEvents().pipe(
    switchMap(event => {
        const band$Array = event.bands.map(bandId => getBand(bandId));
        return combineLatest(of(event), ...band$Array);
    })),
    map(combined => {
        const newEvent = combined[0];
        combined.forEach((x, i) => {
            if (i === 0) return;

            newEvent.bands = {...newEvent.bands, ...x};
        })
    })
)

问题：请帮我找一个更干净的方法（我甚至不确定我的尝试是否产生了预期的结果）。

答案

接受回答

getEvents().pipe(
    switchMap(event => {
        const band$Array = event.bands.map(bandId => getBand(bandId));
        return combineLatest(band$Array).pipe(
          map(bandArray => ({bandArray, event}))
        );
    })
)

原始答案

你可能想尝试这些方面的东西

getEvents().pipe(
    switchMap(event => {
        const band$Array = event.bands.map(bandId => getBand(bandId));
        return forkJoin(band$Array).pipe(
          map(bandArray => ({bandArray, event}))
        );
    })
)

此变换返回的Observable会发出一个具有2个属性的对象：bandArray包含使用getBand服务检索的波段数组，event是由getEvents返回的Observable发出的对象。

还要考虑你正在使用switchMap，这意味着一旦getEvents返回的Observable发出，你将切换到最后一次发射并完成此刻可能正在运行的任何事物。换句话说，如果执行forkJoin所需的时间比从一个发射和另一个getEvents的时间长，你可以放弃一些事件。

如果你不想放松任何东西，那么你最好使用mergeMap而不是switchMap。

更新的答案 - Band Observable未完成

在这种情况下，我理解getBand(bandId)返回一个Observable，它首先在第一次查询后端时发出，然后在后端的band数据发生变化时发出。如果这是真的，那么你可以考虑这样的事情

getEvents().pipe(
    switchMap(event => {
        return from(event.bands).pipe(
           switchMap(bandId => getBand(bandId)).pipe(
              map(bandData => ({event, bandData}))
           )
        );
    })
)

这种转换产生一个Observable，它可以在新事件发生的任何时候发出，也可以在频带数据发生变化时发出。