ionic2 - Calculating sum of elements in Angular 2 and ionic 2 ngfor

Question

I am developing a mobile application with ionic 2 and I need for each of course the race table and calculates the sum of allocation per year. I tried with this code, but it does not work. Can you help me please?

   <ion-row *ngFor="let ch of cheval1 ">
      {{ch[0].annee }}
    <div *ngFor="let m of members  ; let rowIndex = index">
            <ion-col *ngIf="ch[0].annee == (m.Course.date |date : 'yyyy' )">
            {{ m.Course.allocation}} 
            </ion-col>
     </div>

component

@Component({
  selector: 'page-view-cheval',
  templateUrl: 'view-cheval.html',
})
export class ViewChevalPage {
  cheval ;
  crs = 0 ;
  cheval1 ;
  members ;
  vcheval : string ="Compteurs";
  constructor(public navCtrl: NavController, public navParams: NavParams, public data: ServiceProvider ,public menuCtrl: MenuController ) {
      this.cheval = navParams.data.member;

       this.getIdCheval() ;
  }
  getIdCheval() {
        return   this.data.viewCheval(this.cheval.Cheval.id)
         .subscribe(
                  data=> {
                      this.members = data.course_cheval;
                      this.cheval1 =data.engagements;
                       console.log(this.members[1].Entraineur.nom);
                          console.log(data);
                  },
                  err=> console.log(err)
            );
  }

fiche json:

Course: {
    id: "460",
    date: "2012-06-24",
    nom_du_prix: "GODOLPHIN ARABIAN",
    allocation: "20000",
    hippodrome_id: "2",
    jouree: "36",
    categorie_id: "1",
    distance: "1600",
        },
    Course: {
    id: "306",
    date: "2013-02-17",
    nom_du_prix: "HAMADI BEN AMMAR",
    allocation: "12000",
    hippodrome_id: "2",
    jouree: "10",
    categorie_id: "2",
    distance: "1600",
    },
    Course: {
    id: "328",
    date: "2013-03-31",
    nom_du_prix: "DE L’ INDéPENDANCE",
    allocation: "25000",
    hippodrome_id: "2",
    jouree: "19",
    categorie_id: "1",
    distance: "2000",
    },
    engagements: [
    [
    {
    annee: "2015"
    }
    ],
    [
    {
    annee: "2014"
    }
    ],
    [
    {
    annee: "2013"
    }
    ],
    [
    {
    annee: "2012"
    }
    ]
    ]

Answer 1

You can do it in component:

allocationSum: number;
// other variables

getIdCheval() {
  // ...
  this.members = data.course_cheval;
  this.allocationSum = this.members.reduce((previous, current) => {
    return previous + parseInt(current.Course.allocation);
  }, 0);
}

Or creating a pipe:

@Pipe({ 
  name: 'sumByAllocation' 
})
export class SumByAllocationPipe implements PipeTransform {
  transform(input: any): number {
    if (Array.isArray(input)) {
      return input.reduce((previous, current) => {
        return previous + parseInt(current.Course.allocation);
      }, 0);
    }

    return input;        
  }
}

And in template:

<div> Total Allocation: {{members | sumByAllocation}} </div>