typescript - RxJs Array of Observable 到 Observable of Array

标签 typescript angular rxjs observable

对于在 TypeScript 中使用 Angular2 编写的 Web 应用程序,我需要使用 RxJs Observable s.
由于我以前从未使用过 rxjs,而且我对响应式编程总体上还是个新手,所以有时我很难找到正确的方法来做一些特定的事情。
我现在面临一个问题。我必须在哪里转换 Array<Observable<T>>进入 Observable<Array<T>> .
我将尝试用一个例子来解释它:

  • 我有一个 Observable ,这给了我 Users 的列表( Observable<Array<User>> )
  • User -class 有一个函数 getPosts返回 Observable<Array<Post>> .
  • 我需要映射 Observable<Array<User>>Observable<Array<Post>>评估所有 PostonNext 里面功能。

我可以轻松地从 Observable<Array<User>> 映射至 Observable<Array<Observable<Array<Post>>>>使用
map((result : Array<User>) => result.map((user : User) => user.getPosts()))
我可以压平一个 Array<Array<Post>>进入 Array<Post> .
但是我就是找不到映射 Observable<Array<Observable<Array<Post>>>> 的正确方法进入 Observable<Array<Array<Post>>>
直到现在我使用 combineLatestflatMap一起发挥作用.
对我来说,它似乎有效,而且我使用的编辑器(Atom 编辑器)没有显示任何错误。但是现在我使用 Netbeans,它显示这段代码中有一个错误。使用“tsc”编译代码也会导致以下错误:

Argument of type '(result: Post[]) => void' is not assignable to parameter of type 'NextObserver<[Observable<Post>]> | ErrorObserver<[Observable<Post>]> | CompletionObserver<[...'.
Type '(result: Post[]) => void' is not assignable to type '(value: [Observable<Post>]) => void'.  

所以我的问题是:
我怎样才能“展平” ArrayObservables进入 Array

最佳答案

flatMap 运算符允许这样做。我不完全明白你想做什么,但我会尽力提供一个答案......

如果你想加载所有的

getPostsPerUser() {
  return this.http.get('/users')
    .map(res => res.json())
    .flatMap((result : Array<User>) => {
      return Observable.forkJoin(
        result.map((user : User) => user.getPosts());
    });
}

Observable.forkJoin 允许您等待所有可观察对象接收到数据。

上面的代码假定 user.getPosts() 返回一个可观察...

这样,您将收到一系列帖子:

this.getPostsPerUser().subscribe(result => {
  var postsUser1 = result[0];
  var postsUser2 = result[1];
  (...)
});

关于typescript - RxJs Array of Observable 到 Observable of Array,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36984059/

相关文章:

Angular 2 RC.5 和 VS 2015 : Cannot find name 'module' , 'Set', 'Map', 'MapConstructor', 'SetConstructor'

angular - Angular 路由参数 Observable 的 Observable.forkJoin

angularjs - 如何使 ui-grid 响应 Angular typescript 中的浏览器调整大小事件

node.js - 如何读取 Angular-4 Assets 中的 csv 文件

html - 自定义 Angular 组件不会在模板中呈现为 TR

javascript - 如何修复 fatal error : Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory

javascript - 如何访问子类中 getter 的父类(super class)值?

javascript - 使用模块功能的提供程序创建作用域模块

javascript - FromEvent Keyup 过滤器未按预期工作

创建泛型方法的 Angular 最佳实践