角恢复(angularfire2) -拉出所有与“照片”id匹配的“注释”

Question

不知道该怎么“问”这个。我认为在MySQL中，它被称为“加入”或类似的东西。

我有一个叫“照片”的收藏。我想要在照片中添加“评论”的能力。这些“注释”将存储在另一个集合中。他的评论结构如下：

• 注释(字符串)
• 日期(字符串-这是什么时候发布的)
• photoId (此注释所属照片的ID )。

我有一个有角度的页面，已经在显示有关照片的信息。现在我想显示这张照片的评论。我怎么才能把那张照片上的评论拉出来？？

另外，我希望这是asyc，因为我将有能力添加一个新的评论“动态”。

非常感谢!

Answer 1

您只需查询您的comments集合如下：

...
constructor(private afs: AngularFirestore) { 
    afs.collection('comments', ref => ref.where('photoId','==', this.idOfPhotoYouAreDisplaying)).valueChanges()
}
...

如果要检查模板中的null，可以将结果赋值给变量(例如comments)：

comments: Comment[];
comments$: Observable<Comment[]>;

constructor(private db: AngularFirestore) { 

    this.comments$ = this.db.collection(config.collection_comments, ref => ref.where('photoId', '==', this.photoId))
        .snapshotChanges()
        .pipe(
            map(actions => {
                return actions.map(a => {
                    const data = a.payload.doc.data() as Comment;
                    const id = a.payload.doc.id;
                    return { id, ...data };
                });
            }));
}

ngOnInit() {
    this.comments$.subscribe(c => this.comments == c);
}

现在，在模板中，您可以检查comments

<div *ngIf="comments">
    <div *ngFor="let comment of comments">
        ...
    </div>
</div>

注释1:，您不必将它赋值给一个变量。您可以使用async管道在ngIf中进行检查，但是当您循环检查您的注释时，再次使用async创建第二个订阅，这将导致您的查询执行两次。

备注2:使用async管道的处理可观察到的取消订阅。在订阅组件时，您需要自己处理。(有多种方法来做到这一点)