Firebase函数执行和订阅列表，由firebase函数更新

Question

I think a firebase function updating a list that I have in the firebase database is being captured by a subscription that is subscribed to that list. From what the list output looks like on my phone (in the app)...and from what my console output looks like (the way it repeats) it seems like it is capturing the whole list and displaying it each time one is added. So (I looked this up)...I believe this equation represents what is happening:

(N(N + 1))/2

It is how you get the sum of all of the numbers from 1 to N. Doing the math in my case (N = 30 or so), I get around 465 entries...so you can see it is loading a ton, when I only want it to load the first 10.

To show what is happening with the output here is a pastebin https://pastebin.com/B7yitqvD .

In the output pay attention to the array that is above/before length - 1 load . You can see that it is rapidly returning an array with one more entry every time and adding it to the list. I did an extremely rough count of how many items are in my list too, and I got 440...so that roughly matches the 465 number.

The chain of events starts in a page that isn't the page with the list with this function - which initiates the sorting on the firebase functions side:

let a = this.http.get('https://us-central1-mane-4152c.cloudfunctions.net/sortDistance?text='+resp.coords.latitude+':'+resp.coords.longitude+':'+this.username);  
this.subscription6 = a.subscribe(res => {
console.log(res + "response from firesbase functions");
    loading.dismiss();
}, err => {
    console.log(JSON.stringify(err))
    loading.dismiss();
})

Here is the function on the page with the list that I think is capturing the entire sort for some reason. The subscription is being repeated as the firebase function sorts, I believe.

loadDistances() {
    //return new Promise((resolve, reject) => {
      let cacheKey = "distances"
      let arr = [];
      let mapped;
      console.log("IN LOADDISTANCES #$$$$$$$$$$$$$$$$$$$$$");


      console.log("IN geo get position #$$$$$$$5354554354$$$$$$$");

        this.distancelist = this.af.list('distances/' + this.username, { query: {
          orderByChild: 'distance',
          limitToFirst: 10
        }});


        this.subscription6 = this.distancelist.subscribe(items => {
           let x = 0;

           console.log(JSON.stringify(items) + "      length - 1 load");



           items.forEach(item => {
             let storageRef = firebase.storage().ref().child('/settings/' + item.username + '/profilepicture.png');

              storageRef.getDownloadURL().then(url => {
                console.log(url + "in download url !!!!!!!!!!!!!!!!!!!!!!!!");
                item.picURL = url;
              }).catch((e) => {
                console.log("in caught url !!!!!!!$$$$$$$!!");
                item.picURL = 'assets/blankprof.png';
              });

             this.distances.push(item);

             if(x == items.length - 1) {
               this.startAtKey4 = items[x].distance;
             }

             x++;
           })

           //this.subscription6.unsubscribe();
      })

  }

The subscription in loadDistances function works fine as long as I don't update the list from the other page - another indicator that it might be capturing the whole sort and listing it repeatedly as it sorts.

I have tried as as I could think of to unsubscribe from the list after I update...so then I could just load the list of 10 the next time the page with the list enters, instead of right after the update (over and over again). I know that firebase functions is in beta . Could this be a bug on their side? Here is my firebase functions code:

exports.sortDistance = functions.https.onRequest((req, res) => {
  // Grab the text parameter.
    var array = req.query.text.split(':');
  // Push the new message into the Realtime Database using the Firebase Admin SDK.
  // Get a database reference to our posts
    var db = admin.database();
    var ref = db.ref("profiles/stylists");
    var promises = [];
    // Attach an asynchronous callback to read the data at our posts reference
    ref.on("value", function(snapshot) {
      //console.log(snapshot.val());
      var snap = snapshot.val();
      for(const user in snap) {
        promises.push(new Promise(function(resolve, reject) {
            var snapadd = snap[user].address;
            console.log(snapadd + " snap user address (((((((())))))))");
            if(snapadd != null || typeof snapadd != undefined) {
                    googleMapsClient.geocode({
                      address: snapadd
                    }).asPromise()
                        .then(response => { 
                          console.log(response.json.results[0].geometry.location.lat);


                          console.log("  +++   " + response.json.results[0].geometry.location.lat + ' ' + response.json.results[0].geometry.location.lng + ' ' + array[0] + ' ' + array[1]);


                          var distanceBetween = distance(response.json.results[0].geometry.location.lat, response.json.results[0].geometry.location.lng, array[0], array[1]);
                          console.log(distanceBetween + "      distance between spots");
                          var refList = db.ref("distances/"+array[2]);
                          console.log(snap[user].username + "    snap username");
                          refList.push({ 
                            username: snap[user].username,
                            distance: Math.round(distanceBetween * 100) / 100
                          })

                          resolve();
                        })
                        .catch(err => { console.log(err); resolve();})
            }
            else {
                resolve();
            }   
        }).catch(err => console.log('error from catch   ' + err)));
        //console.log(typeof user + 'type of');

      }

      var p = Promise.all(promises);
      console.log(JSON.stringify(p) +     "     promises logged");

      res.status(200).end();

    }, function (errorObject) {
      console.log("The read failed: " + errorObject.code);
    });
});

What is weird is, when I check the firebase functions logs, all of this appears to only run once...but I still think the subscription could be capturing the whole sorting process in some weird way while rapidly returning it. To be as clear as possible with what I think is going on - I think each stage of the sort is being captured in an (N(N + 1))/2 ...starting at 1 and going to roughly 30...and the sum of the sorting ends up being the length of my list (with 1-10 items repeated over and over again).

Answer 1

I updated to angularfire2 5.0 and angular 5.0 ...which took a little while, but ended up solving the problem:

this.distanceList = this.af.list('/distances/' + this.username,
  ref => ref.orderByChild("distance").limitToFirst(50)).valueChanges();

In my HTML I used an async pipe, which solved the sorting problem:

...

<ion-item *ngFor="let z of (distanceList|async)" no-padding>

...