使用 angularfire2 查询 Firebase 实时数据库上的数据关系

Question

我需要查询 cmets 并仅请求 userId 在评论中列出的用户。

我在 Firebase 实时数据库中的数据库结构：

{
  "comments" : {
    "c_id1" : {
      "commentId" : "c_id1",
      "commentText" : "text",
      "userId" : "u_id1"
    },
    "c_id2" : {
      "commentId" : "c_id2",
      "commentText" : "text",
      "userId" : "u_id3"
    },
  },

  "users" : {
    "u_id1" : {
      "userId" : "u_id1",
      "userName" : "name1",
    },
    "u_id1" : {
      "userId" : "u_id2",
      "userName" : "name2",
    },
    "u_id1" : {
      "userId" : "u_id3",
      "userName" : "name3",
    }
  }
}

我最后需要的是Comment[]，其中Comment是：

{
  "commentId" : "c_id",
  "commentText" :"text",
  "userId" : "u_id",
  "user" : {
    "userId":"u_id",
    "userName":"name"
  }
}

所以，Comment 的类是

export class Comment {
  commentId: string;
  commentText: string;
  userId: string;
  user?: User;
}

到目前为止，我设法获得了所有用户，然后将它们映射到客户端的 cmets。但是如果 db 有 N 个用户并且只有 2 个 cmets，其中 N>>2，这不是很多吗？

  OnGetUsersForComments(){
    return this.angularFireDatabase.list("/comments").valueChanges()
      .subscribe((data) => {
        this.commentsUsers = data;
        this.OnGetCommentsForTask()
      });
  }

  OnGetCommentsForTask(){
    this.angularFireDatabase.list("/comments").valueChanges()
      .map((comments) => {
        return comments.map( (comment: TaskComment) => {
          this.commentsUsers.forEach((user: User) => {
            if (comment.userId === user.userId) {
              comment.commentUser = user;
            }
          });
          return comment;
        });
      })
      .subscribe((data)=> {
        this.comments = data;
      });
  }

有没有办法只从 cmets 获取用户？

我也尝试将此添加到用户，但没有管理它工作：

"userComments" : {
  "uc_id1" : {
    "commentId" : c_id2
  },
}

---

更新0

我已经编辑了问题，希望现在更清楚。

我已经能够使它像这样工作： 来自-https://www.firebase.com/docs/web/guide/structuring-data.html的解决方案 和 https://firebase.google.com/docs/database/web/read-and-write

 comments: TaskComment[] = [];

 onGetComments(){
    var ref = firebase.database().ref('/');

    ref.child('comments/').on('child_added', (snapshot)=>{
      let userId = snapshot.val().userId;
      ref.child('users/' + userId).on('value', (user)=>{
        this.comments.push( new TaskComment( snapshot.val(), user.val() ));
      });
    });
  }

但我想将其转换为 Observable，因为这样我无法在不刷新页面的情况下查看评论是否已被删除。

---

更新 1

在下面评论的帮助下，我提出了这个实现。

onGetComments(){
  this.angularFireDatabase.list("/comments").valueChanges()
    .mergeMap((comments) => {
      return comments.map((comment)=>{
        this.firebaseService
          .onListData('/users', ref => ref.orderByChild('userId').equalTo(comment.userId))
          .valueChanges()
          .subscribe((user: User[])=> {
            comment.user = user[0];
          })
        return comment;
      })
    })
    .subscribe((comment)=> {
      console.log(comment);
    });
}

这将返回单独的 cmets，我宁愿在其中接收 Comment[]，我将尝试使用子事件：“child_added”、“child_changed”、“child_removed”和“child_moved”与 snapshotChanges() 而不是 .valueChanges( )。

Answer 1

好的，根据你的更新，我个人会先创建几个帮助接口：

interface User {
    userId: string;
    userName: string;
}

interface FullComment {
    commentId: string;
    userId: string;
    user: User;
}

interface CommentObject {
    commentId: string;
    commentText: string;
    userId: string;
}

然后是超级方便的辅助方法：

getUser(uid: string): Observable<User> {
    return this.db.object<User>(`/users/${uid}`)
    .valueChanges()
}

getFullComment(commentObject: CommentObject): Observable<FullComment> {
    return this.getUser(commentObject.userId)
    .map((user: User) => {
        return {
            commentId: commentObject.commentId,
            commentText: commentObject.commentText,
            user: user,
        };
    });
}

所以最后看看让 FullComment 对象可观察变得多么容易：

getComments(): Observable<FullComment[]> {
    return this.db
    .list(`/comments`)
    .valueChanges()
    .switchMap((commentObjects: CommentObject[]) => {
        // The combineLatest will convert it into one Observable
        // that emits an array like: [ [fullComment1], [fullComment2] ]
        return Observable.combineLatest(commentObjects.map(this.getFullComment));
    });
}

我认为这就是您所需要的。请让我知道这是否有帮助。 使用 observables 进行愉快的编码 ;)

最新更新：之前忘记做最后一次转换修复TypeError，现在应该没问题了。