首页 文章

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

提问于
浏览 次
2

我需要查询注释并仅请求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"
  }
}

所以，评论课是

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

到目前为止，我设法获得所有用户，然后将它们映射到客户端的评论 . 但是，如果db有N个用户且只有2个注释，那么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;
      });
  }

有没有办法只从评论中获取用户？

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

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

Update 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，因为有了这个，我无法看到是否删除了评论而没有刷新页面 .

Update 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);
    });
}

这将返回单独的注释，我宁愿接收Comment []，我将尝试使用子事件：“child_added”，“child_changed”，“child_removed”和“child_moved”，而使用snapshotChanges（）代替.valueChanges（） .

json angular firebase-realtime-database rxjs angularfire2

1 回答

  • 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));
    });
}

    我想这就是你需要的 . 如果这有用，请告诉我 . 带有可观察量的快乐编码;）

    最新更新：以前忘记进行最后一次转换来修复TypeError，所以现在它一定没问题 .

    回复于

相关问题