Trying to sum up the grandTotal doesn't work

Question

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.

Maureen Moore · Answer

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" >

Jefferson S. Motta · Answer

Here are! you are using a loop with more than one button: May your logic must be another! Best, Jeff

Maureen Moore · Answer

I tried changing the button to type=button but then the form didn't submit at all.

Maureen Moore · Answer

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 Cart button > and in the controller, I call the onSubmit function.

Jefferson S. Motta · Answer

Me too. Show all parts of your code where onSubmit appears. Best, Jeff

Maureen Moore · Answer

Thanks Jefferson. Where is the onSubmit function double-defined? I don't see it.

Jefferson S. Motta · Answer

Without seeing your whole code is difficult but looks like onSubmit is double defined his $".action".

Maureen Moore · Answer

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 Moore · Answer

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 Moore · Answer

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 Moore · Answer

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 Moore · Answer

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?

Jefferson S. Motta · Answer

the problem is the call, look at: https://blog.angular-university.io/angular-debugging/