angular foreach problems when adding new items

I have an angular application with Firebase. I want to change the value of an firebase item. Everytime the total KM changes it needs to be set to the right value. so this is my services:

    countKm(){
    this.totalKmRef = this.db.list(this.uid + '/rides');
    this.totalKm$ = this.totalKmRef.valueChanges();
    this.totalKm$.subscribe(res=> this.getAllRides(res));
  }

  getAllRides(res){
    this.rides = res;
    this.rides.forEach(ride =>{
        this.uniqueRides.push(ride.km);
    })
    this.totalKm = this.uniqueRides.reduce(this.sum);
    localStorage.setItem("totalKm", this.totalKm);
  }

  sum(a, b){
    return a += b;

  }

Now for some reason, when i add a ride everything is fine, but the second time everything goes wrong.

for example the first time the foreach runs i get (after firebase has already 5 items):

0{
0: 5,
1: 5,
2: 5,
3: 5,
4: 5,
}

After i run the foreach 1 time my object list is like this: 0{ 0: 5, 1: 5, 2: 5, 3: 5, 4: 5, 5: 5, }

After add a new value the second time and further the foreach does this:

0{
    0: 5,
    1: 5,
    2: 5,
    3: 5,
    4: 5,
    5: 5,
    6: 5,
    7: 5,
    8: 5,
    9: 5,
    10: 5,
    11: 5,
    12: 5,

        }

Is there some one who can help me? I think it's a wrong configuration in the foreach but can't find out where.

Thanks for you help!