使用AngularFire处理firestore集合中的snapshotChanges

Question

我已经完美地运行了我的应用程序

"@angular/fire": "^6.1.5",
"@angular/core": "~12.0.2"

就像

服务.ts

getInboxCollection(userId: string) {
 return this.firestore.collection(`/user/${userId}/inbox/`).snapshotChanges().pipe(
       map(
         changes => {
           return changes.map(
             a => {
              const data: any = a.payload.doc.data();
              data.id = a.payload.doc['id'];
              return data;
            });
        })
    );
}

组件.ts

this.service.getInboxCollection(this.userId).subscribe((res: any) => {
    console.log(res);
}

现在我已经迁移到最新版本的 AngularFire

"@angular/fire": "^7.0.4",

新的变化是

service.ts

import { doc as fireDoc, docData, Firestore, docSnapshots } from '@angular/fire/firestore';

getInboxCollection(userId: string) {
 const refOfInbox = fireCollection(this.firestore, `/user/${userId}/inbox/`);
    return docSnapshots(fireDoc(refOfInbox)).pipe(map(res => {
      const data = res.data();
        data['id'] = res.id;
        return data;
    }))
}

组件.ts

this.service.getInboxCollection(this.userId).subscribe((res: any) => {
    console.log(res);
}

但我在控制台上变得不确定。
根据此官方文档docSnapshots，数据仅可通过访问 firebasse 文档 获得。
https://github.com/angular/angularfire/blob/master/docs/version-7-upgrade.md

但是如何使用 docSnapshots 或其他实时更改的方法从 firebase 集合 获取数据？
请帮助我找到更好的方法。
提前致谢。

Answer 1

我已重构您的代码以按照您习惯使用 angular/fire 7 的方式返回数据。就像在单个文档上使用 docSnapshots 一样，您可以在集合上使用 collectionChanges。请确保您的路径正确，否则将不会返回数据。

服务：

import {collection, collectionSnapshots, doc, docSnapshots, Firestore} from '@angular/fire/firestore';


  getInboxCollection(userId: string) {
    const refOfInbox = collection(this.firestore, `/user/${userId}/inbox/`);
    return collectionSnapshots(refOfInbox).pipe(map(res => res.map(data => {
      const id = data.id
      const docData = data.data()
      return {...docData, id}
    })));

组件：

    this.service.getInboxCollection(this.userId).subscribe((res: any) => {
      console.log(res);
    });