Angular Firestore (angularfire2) - 拉取与“照片”ID 匹配的所有“评论”答案

【问题标题】：Angular Firestore (angularfire2) - Pull all "comments" that match a "photo" idAngular Firestore (angularfire2) - 拉取与“照片”ID 匹配的所有“评论”
【发布时间】：2018-10-08 05:55:27
【问题描述】：

不知道如何正确地“问”这个。我认为在 MySQL 中它被称为“Joining”或类似的东西。

我有一个名为“照片”的集合。我希望能够向照片添加“评论”。这些“评论”将存储在另一个集合中。他的评论结构如下：

评论（字符串）
日期（字符串 - 发布时间）
photoId（此评论所属照片的 ID）。

我有一个 Angular 页面，它已经显示了有关照片的信息。现在我想显示那张照片的 cmets。我怎样才能只拉出属于该照片的 cmets？？

另外，我希望这是 asyc，因为我将能够“即时”添加新评论。

非常感谢！

【问题讨论】：

标签： angular google-cloud-firestore angularfire2

【解决方案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： 您不必将其分配给变量。您可以使用 ngIf 中的 async 管道进行检查，但是当您循环访问 cmets 时，再次使用 async 创建第二个订阅，这将导致您的查询执行两次。

注意 2： 使用 async 管道处理您的 observable 的取消订阅。订阅组件时，您需要自己处理。（有多种方法）

【讨论】：

我还没有尝试过，但“哪里”似乎可以满足我的要求。谢谢！
嘿蒂姆。我遇到了一个不同的问题。如果“查询”返回...... null......我会得到很多错误。你对如何处理这个问题有什么建议吗？如果它为 null，则将布尔值设置为 false。我当前的查询如下所示： this.db .collection(config.collection_cmets, 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}; }); } ));
废话。我讨厌这个 stackoverflow cmets 系统是如何工作的。基本上，我可以在有 cmets 的图像上显示我的 cmets。在没有 cmets 的图像上，我在控制台日志中收到很多错误，这完全有道理，因为它什么也没返回。
其实是nvm。我的“很多错误”是因为我在一个“空”的事情上做了一个 doDate()。然而，我仍然很好奇如何检测我的数据库是否返回 null，以便我可以使用 ngIf 显示“无评论”模板。