Firebase Cloud Firestore

Ionic Framework ionic-v3
21

I’m currently trying to get it to work. I can bind to the UI when using AngularFirestore.valueChanges. Switching to snapshotChanges to retrieve the id is giving me problems. The examples provided in this thread (and video) use map and log to the console. To get that working I had to also call subscribe on the snapshot observable. Apparently it needs a subscriber before it will emit anything. I later found I could just use subscribe without preceding it with map. So now my code (simplified) looks like:

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

The console log within subscribe prints the data from the store correctly. I have no idea how to bind that to the UI in an angular manner.

To get the valueChanges examples working you must put the async pipe in your UI.

  <div *ngFor="let item of items | async;">

Doing so for the _snapshot returns:

Error: InvalidPipeArgument: ‘[object Object]’ for pipe ‘AsyncPipe’

Trying to just use the json pipe elicits:

ERROR TypeError: Converting circular structure to JSON

which is fair enough. I know it’s not the correct way of doing it. So what is?

1 Like