Trying to sum up the grandTotal doesn't work

Maureen Moore

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.

13 Replies

Know the answer? Post it — somebody with the same question will find it here.

Jefferson S. Motta6y ago
Here are!

you are using a loop with more than one button:
Maureen Moore6y ago
I tried changing the button to type=button but then the form didn't submit at all.
Maureen Moore6y ago
In the HTML I have
<form *ngFor="let product of products" [formGroup]="myForm" (ngSubmit)="onSubmit(product.thumbnail, quantity, product.name, product.price )">

<button type="submit" class="btnAddAction">Add to Cartbutton>
and in the controller, I call the onSubmit function.
Jefferson S. Motta6y ago
Me too.

Show all parts of your code where onSubmit appears.

Best,

Jeff
Maureen Moore6y ago
Thanks Jefferson. Where is the onSubmit function double-defined? I don't see it.
Jefferson S. Motta6y ago
Without seeing your whole code is difficult but looks like onSubmit is double defined his $".action".
Maureen Moore6y ago
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">
Maureen Moore6y ago
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.
Maureen Moore6y ago
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>
Maureen Moore6y ago
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.
Maureen Moore6y ago
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.
Maureen Moore6y ago
1. <table>
2. <tr *ngFor="let item of items">
3. <td>{{item.quantity}} td>
4. <td>{{item.product_price | currency:'USD':true }} td>
5. tr>
6. <tr><td>td><td>td><td>td><td>td><td>Grand Total td><td>{{ grandTotal | currency:'USD':true }}td>
7. 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?

Jefferson S. Motta6y ago

the problem is the call,

look at: https://blog.angular-university.io/angular-debugging/