Trying to sum up the grandTotal doesn't work

JavaScript
#1

I use the following function in my controller:

sum = 0;
total_price = 0;

get grandTotal() {
this.total_price = this.quantity * this.product_price;
this.sum += this.total_price;
return this.sum;
}

I get quantity and product_price from the onSubmit function:

onSubmit(quantity, product_price){
this.product_price = parseFloat(product_price);
const data = {
   quantity,
   product_price
};
this.items.push(data);
localStorage.setItem('items', JSON.stringify(this.items));
}

I display grandTotal with the following:

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

I get wild values for grandTotal and I get the error: Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked.

1 Like
#2

Just from my experience, for the grandTotal() method
`

this.total_price = this.quantity * this.product_price;
this.sum += this.total_price;
return this.sum + this.total_price;

`
have you tried it this way? this would also help make your code neater if anything

#3

I still get wild values for grandTotal and the same error but thanks for the effort.

1 Like
#4

Perhaps something is wrong with your way inputting things, that’s what happens usually when you try to get the value of something but then actually end up getting it’s memory address or something

#5

I don’t understand how I am supposed to change the inputs.

#6

Hi there,

it would be awesome if you could show us your code,
so that we can test stuff out!

#7

In the template:

<form [formGroup]="myForm" name="myForm" method="GET">
<div id="cartItemsList">
<ul *ngFor="let product of products">
<li>
<div>{{product.price | currency:'USD':true }}</div>
<button class="minus-btn" (click)="minus(product)" type="button" name="btn">
<img src="../assets/images/minus.svg" alt="minus" /></button>
<input pattern="^(0|\+?[1-9]\d*)$" class="num" name="int" [value]="product.nullValue" formControlName="int"  ng-minlength="0" type="number">
<button class="plus-btn" (click)="plus(product)" type="button" name="btn">
<img src="../assets/images/plus.svg" alt="plus" /></button>
<button type="submit" class="btnAddAction" (click)="onSubmit(quantity, product.price )">Add to Cart</button>
</li>
</ul>
</div>
</form>

And in the controller:

plus(product:any){
  product.nullValue++;
  this.quantity = product.nullValue;
  return this.quantity;
}


minus(product:any){ 
 product.nullValue--;
   this.quantity = product.nullValue;
  return this.quantity;
}
#8 
<table>
<tr *ngFor="let item of items">
<td>{{item.quantity}} </td>
<td>{{item.product_price | currency:'USD':true }} </td>
</tr>
<tr><td></td><td></td><td></td><td></td><td>Grand Total </td><td>{{ grandTotal | currency:'USD':true }}</td>
</table>

What I failed to show was that the grandTotal is part of a for loop. That’s why the grandTotal shows a wild sum. It’s constantly being iterated over. How do I get the quantity and product_price outside of a for loop?

#9 
get grandTotal() {
console.log("getter quantity  " + this.quantity);
console.log("getter price " + this.product_price);
}

When I call grandTotal, the quantity and price appear more than once in the console.

#10

I am looping through the ngFor directive so the quantity and price get summed up repeatedly. But when I take the function out of the for loop it doesn’t have any access to the price and quantity variables.

#11

When I take grandTotal out of the ngFor loop it does access the price and quantity variables after all but I am still getting wild values.

#12

I added a pipe but the pipe doesn’t work. This is what I have:

@Pipe({name: 'grandtotal'})

export class GrandTotalPipe implements PipeTransform {
  
  sub_total = 0;
  product_price = 0;
  quantity = 0;
  transform(product_price: number, quantity: number, sub_total: number) {
	sub_total = product_price * quantity;
	sub_total += sub_total;
    return sub_total;
  }
}

and in the HTML:

<div>Grand Total {{product_price | grandtotal: quantity : sub_total}}</div>

#13

The problem is that the price and quantity are getting submitted twice. Once when the quantity is increased or decreased and then again when the Add to Cart button calls the onSubmit function.

#14

I am getting quantity and price not just when I click onSubmit but also when I click on the quantity buttons. This is what my quantity buttons look like:

<button class="minus-btn" (click)="minus(product)" type="button" name="btn">
<img src="../assets/images/minus.svg" alt="minus" /></button>
<input pattern="^(0|\+?[1-9]\d*)$" class="num" name="int" [value]="product.nullValue" formControlName="int" ng-minlength="0" type="number">
<button class="plus-btn" (click)="plus(product)" type="button" name="btn">
#15

The quantity buttons are submitting the quantity every time I click on the plus or minus image. I checked it in console.log. How can I prevent the buttons from submitting?

#16

I changed the buttons to anchors but it’s still submitting via the click function.

#17

When I add a disabled for invalid form function to the quantity buttons and then add required to the text input field, it disables the buttons when I click on them.