Displaying a value in the view

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.

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.

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.

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

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