AngularFire2 and Ionic2, calculating list sum - list

Question

please help me to figure out how to calculate a sum of objects values coming from firebase using AngularFire2 in ionic.
I am trying do this way:
in the HTML file i want call the function:
<ion-col col-1>
{{(calculateAverage(student.$key) | async)}}
</ion-col>
In the .ts file i want to do something like this, get the list of objects, iterate over it and sum the values of a child and return that value to the html.
i know how to use this.af.database.list to get a list and show values in the HTML using the *ngFor, but not know how to iterate in the .ts file and return a value to the HTML, cause this is async.
Example of firebase data:
"-KhdUCJAyr7Y4Zz3QOnl" : {
"-KigSgGlWyFQao80DuA0" : {
"value" : "30"
},
"-KigTDI3Nue88If0fdYl" : {
"value" : "70"
}
}
Can anyong help me please?
Thanks in Advance.

Answer 1

You can do the calculate in subscribe of this.af.database.list.
// suppose you keep the observable
this.items = this.af.database.list('/sample');
// do calculate in observable.subscribe
this.items.subscribe(data => {
data.forEach(item => {
// sum here
calculateSum(item.value);
});
// calculate average here
calculateAverage();
});
example of how to calculate and show in templete:
sumValue = 0;
averageValue = 0;
// sum values
calculateSum(value) {
this.sumValue = this.sumValue + parseInt(value);
}
calculateAverage(count) {
this.averageValue = this.sumValue / count;
}
display result of calculate in template:
<span>averageValue</span>