结合 2 个可观察的答案

【问题标题】：combine 2 observables结合 2 个可观察的
【发布时间】：2019-05-30 12:10:29
【问题描述】：

我使用 firestore 作为数据库并使用 angularfire2 从中检索数据。我有一个 cmets 集合，其中每个评论都存储一个用户 ID。我想获取用户 displayName 和 photoURL 等用户信息，然后将其与原始 cmets 流结合起来，生成一个包含评论信息和用户信息的流。我尝试将 cmets 和 users 流组合如下：

const comments$ = this.afs.collection(`comments`).valueChanges();
const users$ = this.afs.collection(`comments`).valueChanges().pipe(
  switchMap((comments) => {
    return comments.map(comment => this.afs.doc(`users/${comment.uid}`).valueChanges());
  })
);
const combine = zip(comments$, users$, (comments, users) => {
  return {...comments, ...users };
});

上面的代码没有达到我想要的效果。本质上，它从每个评论中读取用户 ID，然后使用此用户 ID 查找相关的用户信息，并将它们组合在一起作为结果流。 cmets$ observable 工作正常。 users$ observable 不起作用。另外，我不确定 zip 在这种情况下是否合适。

【问题讨论】：

标签： rxjs angularfire2

【解决方案1】：

您似乎错过了 users 的集合名称。第二行。

const comments$ = this.afs.collection(`comments`).valueChanges();
const users$ = this.afs.collection(/** HERE?? **/).valueChanges().pipe(
  switchMap((comments) => {
    return comments.map(comment => this.afs.doc(`users/${comment.uid}`).valueChanges());
  })
);
const combine = zip(comments$, users$, (comments, users) => {
  return {...comments, ...users };
});

它似乎也不起作用，因为必须返回 switchMap 内部的可观察对象。

【讨论】：

【解决方案2】：

我认为您搜索的更多是 combineLatest 而不是 zip。由于每次发出一个流时，您都需要重新计算输出流。

合并功能好像也不太好，如果我理解的很好，你必须将每条评论和它的用户一起加入，你可以这样做：

comments.map((comment) => {
      return {
          ...comment,
          user: users.find(user => user.id === comment.user_id)}
   })

这是一个简单的代码 sn-p，其中两个流以这种方式连接，最终得到一个 带有用户信息的 cmets 数组：

function mockUsers$() {
  return rxjs.of([
  {id: '1', name: 'user1'},
  {id: '2', name: 'user2'},
  {id: '3', name: 'user3'}
]);
}

function mockComments$() {
  return rxjs.of([
  {id: '1', user_id: '1', comment: 'user1 comment 1'},
  {id: '2', user_id: '1', comment: 'user1 comment 2'},
  {id: '3', user_id: '1', comment: 'user1 comment 3'},
  {id: '4', user_id: '2', comment: 'user2 comment'},
  {id: '5', user_id: '3', comment: 'user3 comment 1'},
  {id: '6', user_id: '3', comment: 'user3 comment 2'}]);
}

const comments$ = mockComments$();
const users$ = mockUsers$()

rxjs.combineLatest(users$, comments$, (users, comments) => comments.map((comment) => {
      return {
          ...comment,
          user: {...users.find(user => user.id === comment.user_id)}}
   })   
).subscribe((data) => console.log('Comments with user info: ', data));

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.5.2/rxjs.umd.js"&gt;&lt;/script&gt;

希望这会有所帮助！

【讨论】：