Getter not returning the right values

Question

I am trying to sum up all of my sub totals and return a grand total but I get wild values and I used to get the error: Expression has changed after it was checked.

When I use

import { ChangeDetectionStrategy } from '@angular/core';
@Component({
changeDetection: ChangeDetectionStrategy.OnPush
})

it suppresses the expression has changed error but I still get wild values for the grand total.

This is in my component:

totals : number[ ] = [ ];

get grandTotal() {

let i;
let sub_total = 0;
let grand_total = 0;
sub_total = this.product_price * this.quantity;

if (typeof this.product_price === "undefined") {
return 0;
} else {
this.totals.push(sub_total);
for (i = 0; i < this.totals.length; i++) {
grand_total += this.totals[i];
}
return grand_total;
}
}

This is in my HTML;

<div>Grand Total {{ grandTotal }}</div>