Grand Total Function Returns the Wrong Grand Total

[Maureen Moore]

This function returns the wrong grand total. When I add items to the cart, it returns a much higher grand total than is actually there. How can I fix it?

You can see the app in action at cart-64d3f.firebaseapp.com 

In the component:

totals = [];


get grandTotal() {


let i;
let sub_total = 0;
let grand_total = 0;
if  (this.isSubmitted == true) {
 if (typeof this.product_price  !== "undefined" && typeof this.quantity  !== "undefined") {
                                sub_total = this.product_price * this.quantity;
                                this.totals.push(sub_total);
                        }
                }
                         
                               
                for (i = 0; i < this.totals.length; i++) {
                        grand_total += this.totals[i];
                }
 
        return grand_total;
 
}

In the HTML:

<td>{{grandTotal | currency:'USD':true }}</td>

[Maureen Moore]

If I initialize totals as an empty array like this var totals = []; inside of the function, it resets the totals to an empty array every time the function is called and the grand total is just the quantity times price subtotal every time the function is called.

[Maureen Moore]

The grand totals are updating correctly except for when I delete an item. When I delete an item, the grand total doesn't decrease. So I just need a way to update the grand totals when the item is deleted. 

[Maureen Moore]

With the help of Scott Logsdon, I was able to fix my code. You can see the solution at https://angular-ivy-at2fdp.stackblitz.io/