In my mobile app, I am using AngularFirestore2v5/rxjs to connect a hybrid Ionicv3/Angularv4 app to a Firestore collection. While binding UI with AngularFirestore.valueChanges works fine, switching to snapshotChanges for retrieving the id is causing some issues. The examples in this thread and video suggest using map and console.log to work with it.
_col: AngularFirestoreCollection<_model>;
_snapshot: any;
constructor(private afs: AngularFirestore) {
this._col = this.afs.collection('items');
// 'items' refers to 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);
// Output: {id: "Q6YZOzyFPvrfsxwT3uTS", field1: "a thing", field2: "another"}
return data;
});
});
The console log inside subscribe correctly displays the data from the store. However, I'm unsure how to bind this to the UI in an angular manner.
To make the valueChanges examples work, you need to use the async pipe in your UI. But when applied to _snapshot, it gives an error:
Error: InvalidPipeArgument: ‘[object Object]’ for pipe ‘AsyncPipe’ When trying to use the json pipe, it results in: ERROR TypeError: Converting circular structure to JSON This clearly isn't the right approach. So, what should be done instead?