Tukukkk

I am using angularfire2 to try and update my Firestore document. I have a reference that I use valueChanges and then subscribe to get the data, but then since I'm updating the data inside the function it will keep calling it since the values change. I figured a 'hack' solution using first() from rxjs/operators, however, there has to be a better way to do this. Below is the code I am trying to implement.

this.storeCollectionRef = this.afs.collection('storeInfo');

this.storeDocumentRef= this.storeCollectionRef.doc<StoreInfo>(window.localStorage.getItem("uid"));

this.storeDocumentRef.valueChanges().subscribe(data=>{

  console.log(data.itemcount);

  var pictures = storage().ref(`${userid}/${data.itemcount+1}`);

  pictures.putString(image, "data_url").then(()=>{

    pictures.getDownloadURL().then(url => {

      this.storeInfo.itemcount = data.itemcount+1;

      this.storeInfo.image = url;

      this.storeDocumentRef.update(this.storeInfo);

    })

  });

Annoyingly, it's not included in the official AngularFire2 docs for working with Firestore documents. However, as you might know, AngularFire2 is just a wrapper around the original Firebase package - intended to make it easier to work with Firebase in an Angular environment. Checking out the docs for the original Firebase package provides this example of how to accomplish this goal with the basic Firebase package:

var docRef = db.collection("cities").doc("SF");



docRef.get().then(function(doc) {

    if (doc.exists) {

        console.log("Document data:", doc.data());

    } else {

        // doc.data() will be undefined in this case

        console.log("No such document!");

    }

}).catch(function(error) {

    console.log("Error getting document:", error);

});

... which is pretty simple. If you were using the original Firebase package you could just get the reference to your document and call .get()... if only AngularFire2 included that functionality! Digging a little deeper, it DOES appear to wrap that method too. Looking at the source code for AngularFire2 Firestore documents, waaayyyyyy at the bottom, the very last method, after valueChanges(), is get()! So it looks like it IS SUPPORTED just not documented.

/**

   * Retrieve the document once.

   * @param options

   */

get(options?: firestore.GetOptions) {

    return from(this.ref.get(options)).pipe(

        runInZone(this.afs.scheduler.zone)

    );

}

I'm not in a position to test this myself, so I can't promise it will work. Try it and let me know. As a last resort if you can't get AF2 to behave, you could skip using the AngularFire2 package for that particular feature and also import the original Firebase package to that component, and just reference the document using the Firebase package's method instead.

EDIT:

Incase it wasn't clear, I'm suggesting you try something like:

this.storeCollectionRef = this.afs.collection('storeInfo');

this.storeDocumentRef= this.storeCollectionRef.doc<StoreInfo>(window.localStorage.getItem("uid"));



this.storeDocumentRef.get().then( data => {

    console.log(data.itemcount);

    // ... etc...

    // continue doing your picture uploading stuff here

    // ...

});