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.

[Maureen Moore]

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

[456avijit]

Please use type and typescript.

Avijit Chakraborty

Citi Bank IFSC

Ireland

--
You received this message because you are subscribed to the Google Groups "Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/angular/3d753321-c8a5-49a0-8838-7e1152e54087o%40googlegroups.com.

[Maureen Moore]

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]

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]

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]

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]

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

[ThangLD]

Try debugging into the  grandTotal() function to see what its return value is:

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

console.log('sum = ', this.sum);
return this.sum;
}  

[Maureen Moore]

Thanks ThangLD but I'm not using the get function any more. I'm using a pipe.

[Maureen Moore]

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?

[Maureen Moore]

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

[bastien lemaire]

Try to add the type="button" attribute to the buttons which are not the submit button.

Angular sets all buttons to type="submit" by default

Bastien Lemaire

On Mon, 20 Jul 2020 at 14:37, Maureen Moore <maka...@gmail.com> wrote:

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

--

You received this message because you are subscribed to the Google Groups "Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/angular/ac7e3f4c-a7b6-4e9d-a155-ec21ec729af2o%40googlegroups.com.

[Maureen Moore]

I did that already but thanks Bastien anyway.

[Scott Logsdon]

<button type="button" ng-click="processButtonOne()" onclick="javascript://">Button One</button>

Best Regards,

 

Scott Logsdon, Web Developer
Ser.vi Worldwide LLC USA & Ser.vi BV Europe
Email: sc...@ser.vi

 

On Mon, Jul 20, 2020 at 8:59 AM Maureen Moore <maka...@gmail.com> wrote:

I did that already but thanks Bastien anyway.

--
You received this message because you are subscribed to the Google Groups "Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/angular/15fc855e-134e-4db3-9c61-1573413c7e4do%40googlegroups.com.

[Maureen Moore]

Thanks Scott but ng-click doesn't work. The quantity doesn't increment when I click on the plus button. 

[Maureen Moore]

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.

[Maureen Moore]

I added onclick="return false;" to the quantity buttons but they're still submitting when I click on them. 

[Maureen Moore]

I added $event.preventDefault(); to the plus function but it's still submitting the quantity.

[Anshu Rani]

On Mon, Jul 20, 2020 at 11:01 PM Anshu Rani <ans...@google.com> wrote:

On Mon, Jul 20, 2020 at 9:58 PM Maureen Moore <maka...@gmail.com> wrote:

I added $event.preventDefault(); to the plus function but it's still submitting the quantity.

--
You received this message because you are subscribed to the Google Groups "Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/angular/9f482b6f-500e-470d-bbed-82132029f5e6o%40googlegroups.com.

[Anshu Rani]

[Anshu Rani]

[Anshu Rani]

[Anshu Rani]

On Mon, Jul 20, 2020 at 9:58 PM Maureen Moore <maka...@gmail.com> wrote:

I added $event.preventDefault(); to the plus function but it's still submitting the quantity.