AngularFire2 和 Ionic2，计算列表总和

Question

请帮助我弄清楚如何使用离子中的 AngularFire2 计算来自 firebase 的对象值的总和。

我正在尝试这样做：

在 HTML 文件中我想调用函数：

    <ion-col col-1>
      {{(calculateAverage(student.$key) | async)}}
    </ion-col>

在 .ts 文件中，我想做这样的事情，获取对象列表，迭代它并将子项的值和 return 的值相加到 html。

我知道如何使用 this.af.database.list 获取列表并使用 *ngFor 在 HTML 中显示值，但不知道如何在 .ts 文件和 [=35= 中迭代] HTML 的值，因为这是异步的。

Firebase 数据示例：

"-KhdUCJAyr7Y4Zz3QOnl" : { "-KigSgGlWyFQao80DuA0" : { "value" : "30" }, "-KigTDI3Nue88If0fdYl" : { "value" : "70" } }

有人能帮帮我吗？

提前致谢。

Answer 1

您可以在 this.af.database.list 的 subscribe 中进行计算。

// 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();
});

如何计算并在模板中显示的示例：

sumValue = 0;
averageValue = 0;
// sum values
calculateSum(value) {
  this.sumValue = this.sumValue + parseInt(value);
}
calculateAverage(count) {
  this.averageValue = this.sumValue / count;
}

在模板中显示计算结果：

<span>averageValue</span>

AngularFire2 和 Ionic2，计算列表总和

AngularFire2 and Ionic2, calculating list sum

loops

list

ionic2

angularfire2