RxJs-无法解析可观察流

Question

因此，我有一个NgRx选择器，它返回一个带有一系列触点的可观测值。我想映射这个流，对于每个联系人数组，映射每个联系人，并向Github发出Http请求以获取他们的配置文件图像，并将其附加到联系人对象。然而，我不知道如何做到这一点，而不以一系列的可观测数据结束。

下面是我尝试过的，但这不起作用。

this.contacts$: Observable<Contact[]> = this.store.select(getContacts).pipe(
  map(contacts => {
    return contacts.map(contact => {
      return this.contactService.getGithub$(contact._id).pipe(
        map(githubInfo => {
          return {
            ...contact,
            imageUrl: githubInfo.avatar_url
          };
        })
      );
    });
  })
);

下面是我收到的错误消息：

Type 'Observable<Observable<Contact>[]>' is not assignable to type 'Observable<Contact[]>'.
  Type 'Observable<Contact>[]' is not assignable to type 'Contact[]'.
    Type 'Observable<Contact>' is missing the following properties from type 'Contact': first_name, last_name, job_title, location, company ts(2322)

如有任何建议，将不胜感激！

Answer 1

this.contacts$: Observable<Contact[]> = this.store.select(getContacts).pipe( 
    map(contacts => {
        return contacts.map(contact => {
            return this.contactService.getGithub$(contact._id).pipe(
                map(githubInfo => {
                    return { ...contact, imageUrl: githubInfo.avatar_url };
                })
            );
        });
    }),
    concatAll()
);

只需将concatAll运算符添加到管道流。

Answer 2

这里的问题是您正在运行一个Array.map，它为每个联系人返回一个可观察的。如果您希望可观测返回完整的数组，您将需要这样的东西：

this.contacts$: Observable<Contact[]> = this.store.select(getContacts).pipe(
  // take the array and emit each value one by one
  concatMap(contacts => from(contacts)),
  // emit an array containing the contact and the corresponding githubInfo
  concatMap(contact => forkJoin(of(contact), this.contactService.getGithub$(contact._id))),
  // take the returned array and convert it to an Object
  map(([contact, githubInfo]) => ({ ...contact, imageUrl: githubInfo.avatar_url})),
  // concatenate everything into a final Array
  toArray()
);

我必须承认我已经写了这个在路上，因此没有测试它，但我认为它应该工作！

如果维护原始顺序很重要，请保留concatMap。如果没有，请使用mergeMap来提高性能。

Answer 3

使用switchMap将您的联系人数组映射到一个可观察对象，该可观察对象同时执行您的http请求并将它们映射到扩展联系人对象。

this.contacts$: Observable<Contact[]> = this.store.select(getContacts).pipe(
  switchMap(contacts => forkJoin(
    contacts.map(contact => this.contactService.getGithub$(contact._id).pipe(
      map(gitHubInfo => ({ ...contact, imageUrl: githubInfo.avatar_url }))
    ))
  ))
);