首页 > 解决方案 > 参考对象的可观察链

问题描述

我是 Observables 的新手,我不确定我是否做对了。

这是场景。

a) 订阅路由参数

b)当参数更改时,执行服务请求以获取可观察的数据

c) 处理数据

d) 然后对它们的依赖项进行更多请求并获取它们的依赖项 observables。

我的问题是,在 d) 之后,我可以很好地获取他们的依赖项 observables,但我没有到已处理数据的映射以根据需要附加响应。

例子:

this.route.queryParams.pipe(map((params) => {
  this.selectedTabIndex = +params['tabIndex'];
  return params
})).pipe(switchMap((params) => {
  return this.eventService.getEvent(params['eventID']);
})).pipe(map((event) => {
  this.event = event;
  this.selectedActivities = event.getActivities();
  return this.selectedActivities;
})).pipe(mergeMap((activities) => {
  return combineLatest(activities.map((activity) => {
    return this.eventService.getStreams(this.event.getID(), activity.getID(), ['Latitude', 'Longitude'])
  }))
})).pipe(map((activityStreams) => {
  // Here is my problem 
  // As you can see I can get well the streams for the above activities
  // But I don't have the activity that the streams belong to to attach them to
  debugger
})).subscribe()

因此,在最后一个管道中,结果如下所示:

在此处输入图像描述

但是正如您所看到的,我没有对这些流数组最终应该附加到的活动的引用。这就是我想要做的。

也许我做的事情完全错误,所以我愿意讨论。

标签: javascriptrxjsobservable

解决方案


在 Sheshaj Awasthi 的帮助下

我做了以下事情:

this.route.queryParams.pipe(map((params) => {
  this.selectedTabIndex = +params['tabIndex'];
  return params
})).pipe(switchMap((params) => {
  return this.eventService.getEvent(params['eventID']);
})).pipe(map((event) => {
  this.event = event;
  this.selectedActivities = event.getActivities();
  return this.selectedActivities;
})).pipe(map((activities) => {
  return activities.reduce((activityStreamPairArray, activity) => {
    activityStreamPairArray.push({
        activity: activity,
        activityStreams: this.eventService.getStreams(this.event.getID(), activity.getID(), ['Latitude', 'Longitude']),
      });
    return activityStreamPairArray
  }, [])
})).pipe(mergeMap((activityStreamPairArray) => {
  return combineLatest(activityStreamPairArray.reduce((flattenedArray, activityStreamPair) => {
    flattenedArray.push(of(activityStreamPair.activity), activityStreamPair.activityStreams);
    return flattenedArray
  }, []))
})).pipe(map((test) => {
  debugger

}))

我现在有

在此处输入图像描述

它由一个数组组成,其中每 2 个元素可以组合。


推荐阅读