javascript - 转换 rjxs map 并展平/缩减为 flatMap

标签 javascript angular typescript rxjs rxjs5

我相信可以使用 flatMap 重构以下代码,但我似乎无法让它按预期工作。

我理解 flatMap 本质上是映射然后展平,这对我来说是完美的,因为我正在使用 forkJoin,因此可以从 getAutocompleteSuggestions() 返回一组响应。

我想要订阅时的单个结果数组(这是下面的代码生成的结果),但是将顶级映射更改为 flatMap 会向订阅发送多个单个对象。如何使用 flatMap() 更好地编写这段代码?

   const $resultsObservable: Observable<any> = Observable.of(query)
          .switchMap(q => this.getAutocompleteSuggestions(q))
          //tried changing the below to flatMap()
          .map(res => { 
            return res.map(resp => {
              const content = resp.content;
              content.map(result => this.someMethod(result));
              return content;
            })
            .reduce((flatArr, subArray) => flatArr.concat(subArray), []);
          });



  getAutocompleteSuggestions(query: string): Observable<any> {
    const subs$ = [];
    //... add some observables to $subs
    return Observable.forkJoin(...subs$);
  }

最佳答案

看起来 RxJS flatMap 和数组原型(prototype)方法 flatMap 之间可能存在一些混淆。请注意,RxJS flatMap 的目的不是展平作为流主题的数组,而是将 Obervables 流展平为单个 observables。请参阅此帖子:

Why do we need to use flatMap?

... Basically if Observable denotes an observable object which pushes values of type T, then flatMap takes a function of type T' -> Observable as its argument, and returns Observable. map takes a function of type T' -> T and returns Observable.

如果您希望代码更简洁,可以使用 myArray.flatMap 方法。以下是使用 Array flatMap 方法对您的问题的潜在答案:

const $resultsObservable: Observable<any> = Observable.of(query)
  .switchMap(q => this.getAutocompleteSuggestions(q))
  // Flatmap on the array here because response is an array of arrays.
  // The RxJS flatMap does not deal with flattening arrays
  .map(res => res.flatMap(resp => {
    const content = resp.content;
    content.map(result => this.someMethod(result));
    return content;
  }));

getAutocompleteSuggestions(query: string): Observable < any > {
  const subs$ = [];
  //... add some observables to $subs
  return Observable.forkJoin(...subs$);
}

关于javascript - 转换 rjxs map 并展平/缩减为 flatMap,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49191962/

相关文章:

javascript - 像在 iOS 7 或 Windows 7 中一样创建牛奶玻璃效果

php - 如何获取动态添加的 html 按钮上的事件

javascript - Angular 7 - 使用 ngFor 将数组中的最后一项设为链接

javascript - TypeORM queryBuilder 中的可选参数

javascript - 我们可以将 Angular FormArray 与 angular2-multiselect 下拉菜单一起使用吗?

javascript - 多个层次结构中的事件句柄 React

javascript - 如何用JavaScript隐藏和显示一个div的所有内容?

html - 将菜单按钮转换为小屏幕的下拉菜单(Angular2)

javascript - 无需在调用类中订阅即可获取可观察的返回值

angular - 找不到 's' 的 NgModule 元数据。 (仅限生产)