使用 userId 获取用户信息 - Angular Firestore答案

【问题标题】：Get user info with userId - Angular Firestore使用 userId 获取用户信息 - Angular Firestore
【发布时间】：2018-04-16 14:55:07
【问题描述】：

我有 2 个不同的收藏：

用户：姓名、电子邮件和头像（取自他们的社交网络）
配方：用户可以创建的文档。它还包含 userId 及其对以前集合的引用

为了在我的页面上显示这些食谱，我使用：

this.recipes = collection.snapshotChanges().map(actions => {
      return actions.map(action => ({
        $id: action.payload.doc.id,
        ...action.payload.doc.data()
      }));
    });

还有：

<ion-card *ngFor="let recipe of recipes | async; let i = index">
...

获取用户头像和姓名的最佳方式是什么？

【问题讨论】：

标签： angular firebase google-cloud-firestore

【解决方案1】：

对于每个配方，您都有一个用户 ID。使用它来检索每个配方的用户文档。（如果用户在列表中多次出现，可能会缓存用户。）请记住，文档检索是异步的，因此您可能希望创建一个 promise 数组并使用 Promise.all https://stackoverflow.com/a/47554838/179156

【讨论】：

怎样才能让同一个用户只获得一次？
我不确定您所说的“只获得同一个用户一次”是什么意思。我想说逻辑可能是：循环浏览食谱。对于每个配方，检查用户和 ID 并查看我们是否缓存了该用户信息，如果是，则返回该信息，否则进行数据库调用以检索用户。（然后将用户添加到缓存中。）。这是否更有意义和/或回答了问题？
好的，确实如此，但我如何将该查询（以获取用户信息）集成到我的 snapshotChanges 中？您链接的querySnapshots 没有collection，它会改变什么吗？
一种直接的方法是订阅 observable。即collection.snapshotChanges().map(actions => { return actions.map(action => ({ $id: action.payload.doc.id, ...action.payload.doc.data() })); }).subscribe(recipes => { this.recipies = recipes }); 然后您将“this.recipies”作为食谱数组，然后您可以遍历该数组以获取用户用户。（同时从 HTML 端移除异步管道。）。（在这条评论中很难看到，但变化是在 observable 的末尾添加了一个订阅。）
但我已经在.map 上拥有了它，如果我执行.subscribe 将再次迭代该对象。此外，我还需要在我的 HTML 上删除 For。让我有一个解决方法，看看是否可以在没有额外功能的情况下拥有它

【解决方案2】：

试试这个代码

this.recipes = collection.snapshotChanges().map(actions => {
  return actions.map(a => {
    const data = a.payload.doc.data();
    const id = a.payload.doc.id;
    //this.afs.collection('users') is the ref to users collection, yours should be different
    return this.afs.collection('users').doc(data.userId).snapshotChanges().map(userActions=>{
      return userActions.payload.data();
    }).map(user=>{
      return { id:id, userName:user.name, ...data };
    })
  });
}).flatMap(merge => Observable.combineLatest(merge)).map(data => {
  return [].concat(...data).map(d => {
    return d;
  })
});

【讨论】：