-2

I am writing a checkout view of a shopping cart where an array is displayed with the items to be purchased like this:

app.component.html

<div *ngFor="let x of shoppingarray">
  <!-- Other code here... -->
</div>

I want to give the user the possibility of adding more items to the list at the last minute but somehow the total doesn't refresh even though I update the array and the subtotals.

I do update the subtotals on the array by incrementing a quantity var which affects directly the objects in the array like this:

app.component.ts

AddmoreItemsOFThistype(a) {
  this.shoppingarray[a].qt+= 1;
}

Then I recalculate each subtotal by passing each subtotal through a pipe giving as parameter the x.qt which is the incremented quantity (the pipe just multiplies x.price * x.qt).

app.component.html

<div> {{ x.price | totalPerItem: x.qt }} </div>

The problem is that the global total won't update values that have been returned from the filters.

app.component.html

<div> {{ shoppingarray | CalculateTotalpipe }} </div>

CalculateTotalpipe just loops the whole array adding all totals, somehow the initial total is correct but modifications to the subtotals don't take effect.

Is there any way to refresh shoppingarray so that CalculateTotalpipe generates an updated total?

Is there a better approach to this?

Thanks!

ng-hobby
  • 2,077
  • 2
  • 13
  • 26
Andrés Sanchez
  • 99
  • 1
  • 10
  • Do you have a variable total in your component? If you do have you bind that variable alone with [(ngModel)] in your view? – toni rmc Aug 20 '17 at 10:07
  • I do have one but I don't get how can I use it in combination with the filter in the view since I am extracting the global total straight from the filter that operates on the whole array `{{shoppingarray|CalculateTotalpipe}}` . Any suggestion on how to combine the `[(ngModel)]` with the var total and the filter alltogether? . I – Andrés Sanchez Aug 20 '17 at 10:29
  • 1
    Read https://angular.io/guide/pipes#pure-and-impure-pipes. You shouldn't use a pipe. Use a regular method of your component, or precompute the total every time a quantity changes. – JB Nizet Aug 20 '17 at 10:34
  • Problem solved: Using pure pipes was not the right approach. After declaring pipes as Impure it was solved. Thanks a lot! – Andrés Sanchez Aug 20 '17 at 11:06
  • I did include one unchangeable "key": number to my array containing the base price so that every time an item is added I update the array ` AddmoreItemsOFThistype(a){ this. shoppingarray[a].price += this. shoppingarray[a].qt * this. shoppingarray[a].baseprice;}`. Then I declared the pipes as impure and that did the trick!!!! Thanks – Andrés Sanchez Aug 20 '17 at 11:23

1 Answers1

0

Andres be cautious with the usage of impure pipes. As it is written in the documentation:

Angular executes an impure pipe during every component change detection cycle. An impure pipe is called often, as often as every keystroke or mouse-move.

This means, every time the user will move the mouse or scroll the page your total amount will be recalculated. This will introduce performance issues.

I would advise to find another way of implementing the total without using a pipe. Why not use a simple service?

gabriela
  • 285
  • 1
  • 2
  • 12