通过 snapshotChanges 将 HTML 与 AngularFirestore 集合绑定

Question

我正在使用 AngularFirestore2v5/rxjs 将混合 Ionicv3/Angularv4 移动应用程序连接到 Firestore 集合。我可以在使用 AngularFirestore.valueChanges 时绑定到 UI。切换到 snapshotChanges 来检索 id 给我带来了问题。此线程（和视频）中提供的示例使用地图并登录到控制台。为了让它工作，我还必须在快照 observable 上调用 subscribe。显然它需要一个订阅者才能发出任何东西。后来我发现我可以只使用 subscribe 而无需在它前面加上 map。所以现在我的代码（简化）看起来像：

_col: AngularFirestoreCollection<_model>;
_snapshot: any;

constructor(private afs: AngularFirestore) {
  this._col = this.afs.collection('items'); //items being the name of the collection in firestore
  this._snapshot = this._col.snapshotChanges()
                    .subscribe(actions => {
                      return actions.map(snap => {
                        let id = snap.payload.doc.id;
                        let data = { id, ...snap.payload.doc.data() };
                        console.log(data); //{id: "Q6YZOzyFPvrfsxwT3uTS", field1: "a thing", field2: "another"}
                        return data;
                      });
                    });

订阅中的控制台日志会正确打印存储中的数据。我不知道如何以有角度的方式将其绑定到 UI。

要使 valueChanges 示例正常工作，您必须将异步管道放入 UI。 为 _snapshot 返回这样做：

错误：InvalidPipeArgument：管道“AsyncPipe”的“[object Object]” 尝试仅使用 json 管道会引发：

ERROR TypeError：将循环结构转换为 JSON 这很公平。我知道这不是正确的做法。那是什么？

Answer 1

异步管道期望一个未订阅的可观察对象并期望返回一个值。异步管道将订阅自己并输出值。

你可以试试

this._snapshot = this._col.snapshotChanges()
                .subscribe(actions => {
                  return actions.map(snap => {
                    let id = snap.payload.doc.id;
                    let data = { id, ...snap.payload.doc.data() };
                    console.log(data); //{id: "Q6YZOzyFPvrfsxwT3uTS", field1: "a thing", field2: "another"}

                    // use data in your html
                    this.data=data

                    return data;
                  });
                });

html

<div *ngFor="let item of data" ....

编辑 1

this.dataArray=this._col.snapshotChanges()
                .map(actions => {
                  return actions.map(snap => {
                    let id = snap.payload.doc.id;
                    let data = { id, ...snap.payload.doc.data() };
                    return data;
                  })
                })

html

<div *ngFor="let item of dataArray | async" ....