Getter Doesn't Update Upon Delete

JavaScript
,
1

The getter is working just fine for summing up the grand totals but when an item is deleted, the grand total doesn’t get updated.

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];
                }
		this.isSubmitted = false;
        return grand_total;
}

deleteItem(i){
  this.items.splice(i,1);
  this.setStorageItems(this.items);
}

In my HTML:

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

Hi @makamo661, how would you expect grandTotal to update? Its calculated value doesn’t appear to depend on the items in any way, so it probably just stays the same… you might check if the getter actually gets called though by inserting a console.log().

3

I tried putting

this.isSubmitted = true;
this.grandTotal;

in the deleteItems function but that didn’t work either

4

Well the getter probably does get called, it just yields the same result as before having deleted an item. Where is this.items being used to compute the result of this.grandTotal?

5

I don’t understand your question

6

How is this.grandTotal supposed to update in relation to this.items? Could you provide a minimal example on stackblitz or the like that demonstrates the issue?

7

I don’t know how to make a stackblitz for this problem. You can see all of my code at https://github.com/makamo66/angular-shopping-cart

8

Sorry the above link was messed up, I’ve edited the post. Anyway here’s a minimal example to remove items from a list, which then also updates the value from a related getter:

Could you modify this example to demonstrate your problem? Please note that we do not have access to your database or anything, so some hard-coded mock data will have to do.

9

This is the editor URL of the stackblitz that I am now using instead of my old code:

This is the application URL:
https://angular-ivy-at2fdp.stackblitz.io

10

The save button is disabled at Stackblitz. I want to save the code and add my deleteItem code but I don’t see how to do that.

11

I can see the code you added so far; the save button should be enabled again as soon as you modify that code.

12

I updated my code at https://angular-ivy-at2fdp.stackblitz.io

13

Thanks m3g4p0p for the Stackblitz link.

14

Okay in that code you’re not using a getter any more; grandTotal needs to be explicitly updated by calling calcGrandTotal(), which you’re only doing on init. So you might adjust your deleteItem() method like so:

deleteItem(i) {
  this.totals.splice(i, 1);
  this.calcGrandTotal();
  this.setStorageItems(this.totals);
}

Or using a getter as in your original approach:

get grandTotal() {
  return this.totals.reduce((acc, item: any) => {
    return acc + item.product_qty * item.product_total;
  }, 0);
}

deleteItem(i) {
  this.totals.splice(i, 1);
  this.setStorageItems(this.totals);
}

Here’s an updated stackblitz.

1 Like
15

The code is working on my stackblitz now but the grand total is null on init when I look at my own program.

16

It’s working for my program now. I just needed to put calcGrandTotal in my onsubmit function!

17

I suppose if you retrieve the items ansynchronously from the backend you’d have to call calcGrandTotal() after that – on init the items would just be an empty array. But if you don’t want to display it to the user anyway then on submit would of course suffice. :-)

18

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.