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

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

要使valueChanges示例正常工作，您必须将异步管道放在UI中。对_snapshot执行此操作会返回：

错误：InvalidPipeArgument：管道'AsyncPipe'的'[object Object]' 试图只使用json管道引出：

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

Answer 1

异步管道期望一个未订阅的observable并期望返回一个值。异步管道将订阅自己并输出值。

你可以尝试

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" ....

通过snapshotChanges与AngularFirestore集合绑定HTML

1 个答案: