Displaying a value in the view

Ionic Framework ionic-v3
#1

I am currently trying to do an Expense Tracker in Ionic 2. The problem is, I am failing to display the total expenses on the screen, and also, can’t use the total expense in charts. With $scope, it looks like it would be straightforward, but I don’t see it in Ionic 2.
They show up in console.log, but somehow I can’t reference them ini the HTML. If someone can, please show me how.

This is my overview.ts

import { Component, ViewChild } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { Chart } from 'chart.js';
import { Expense } from '../../app/expense.model';
import { ExpenseService } from '../../app/expense.service';


@Component({
  selector: 'page-overview',
  templateUrl: 'overview.html'
})
export class OverviewPage {

  expenses: Expense[];
  pageexpenses:Expense[];
  onlyExpenses: Expense[];
  onlyExpense: Expense[];
  expenseSum=Number;

@ViewChild('barCanvas') barCanvas;
@ViewChild('doughnutCanvas') doughnutCanvas;
@ViewChild('lineCanvas') lineCanvas;

    barChart: any;
    doughnutChart: any;
    lineChart: any;

  constructor(public navCtrl: NavController, public navParams: NavParams,
              public expenseService: ExpenseService) {
 }


  ionViewWillEnter(){
    this.expenseService.getExpenses()
    .then(expenses=> this.expenses=expenses);
 console.log ('expenses',this.expenses);
}

onAddCheck() {
    console.log('add checked',this.expenses);

  }

reduceData(){
var total_amount = 0;

this.expenses.forEach(function (expense) {
    // The plus sign just coerces
    // task.duration from a String to a Number
    total_amount += (+expense.amount);
});
  return total_amount
	// console.log("SUM: ", total_amount);
    }

  purexpense(){
    // var onlyExpense = [];
var expenseSum=0;

this.expenses.forEach(function (expense) {
    if (expense.type == 'Expense') {
       expenseSum += (+expense.amount);
        // onlyExpense.push(expense);
         return expenseSum;
         }
        return expenseSum;
      // console.log("Expenses", expenseSum)
  });
  };

totalExpenses(){
   var onlyExpense = [];

this.expenses.forEach(function (expense) {
    if (expense.type == 'Expense') {
        onlyExpense.push(expense);
      }
      console.log("Expenses", onlyExpense)
      return onlyExpense;

  });

}

}

My overview.html

<ion-header>

    <ion-navbar>
        <ion-title>overview</ion-title>
    </ion-navbar>

</ion-header>



<ion-content padding class="overview">

    <ion-card>
        <ion-card-header>
            Bar Chart
        </ion-card-header>
        <ion-card-content>
            <canvas #barCanvas></canvas>
            <!-- <p>{{reduceData()}}</p> -->
            <ion-list>
                <button ion-item *ngFor="let expense of expenses" (click)="totalExpenses()">
      <h2>{{ expense.amount | currency:'UGX' }}</h2>
      <p>{{ expense.date | date }} - {{ expense.description }}</p>
      <ion-note item-right>{{ expense.category }}</ion-note>
    </button>

            </ion-list>
        </ion-card-content>
    </ion-card>

    <ion-fab right bottom>
        <button ion-fab color="secondary" (click)="reduceData()">
          <ion-icon name="add"></ion-icon>
    </button>
        <ion-label>add transaction</ion-label>
    </ion-fab>

    <ion-card>
        <ion-card-header>
            Doughnut Chart
        </ion-card-header>
        <ion-card-content>
            <canvas #doughnutCanvas></canvas>
            <ion-note item-right>{{ expenseSum }}</ion-note>
            <p [innerHTML]="reduceData(expenses)"></p>
        </ion-card-content>
    </ion-card>

    <ion-card>
        <ion-card-header>
            Line Chart
        </ion-card-header>
        <ion-card-content>
            <canvas #lineCanvas></canvas>
        </ion-card-content>
    </ion-card>

</ion-content>

I would just like to display, total_amount, expenseSum and onlyExpense on the overview page. I also hope to be able to use them in charts. Console.log shows them.

Thanks.

#2

Remove all instances of the word function in your code. Replace it all with arrow functions and then you can access object properties from inside them.

#3

Thanks for the reply. Please show me one example from one of those functions. From there, I will be able to proceed. Thanks once again.

#4 
sumExpenses(): void {
  this.totalExpenses = 0;
  this.expenses.forEach(exp => this.totalExpenses += exp.amount);
}
#5

Thank you very much. You’ve really saved me. I’ve hustled with this for two months. Thanks once again.