Cannot read property 'storageKey' of undefined

JavaScript
21

I would Never not for one second
run a server on my Personal Computer
not even with a firewall
I have any number of “free web hosting accounts”
that I use for my educational projects
and I can easily share my work that way

22

I fixed some errors and the localhost is working now.

23

This function returns the wrong grand total. When I delete the item from the cart, it adds to the 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?

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>

24

I added this.isSubmitted = false; to the delete function and that eliminated the problem of the grand total updating upon delete but it still isn’t updating correctly in general.

25

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

26

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.

27

I’m trying to force the grand total to re-evaluate after the item is deleted but what I have here isn’t working:

deleteItem(i){
this.items.splice(i,1);
this.setStorageItems(this.items);
this.isSubmitted = true;
this.grandTotal;
}

After the item is deleted, it is the same grand total as before.

<tr *ngFor="let item of items; let i = index">
<td>
<button type="button" (click)="deleteItem(i)" class="deletebtn">X</button></td>
</tr>
28

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.

29

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/

30