arrays - How can I update values in on the view after they pass through a pipe in angular2 + -

i writing checkout view of shopping cart array displayed items purchased.

*ngfor="let x of shoppingarray"

i want give user possibility of adding more items list @ last minute somehow total doesn't refresh though update array , subtotals.

i update subtotals on array incrementing quantity var affects directly objects in array.

(component.ts) addmoreitemsofthistype(a){ this.shoppingarray[a].qt += 1; }

then recalculate each subtotal passing each subtotal through pipe giving parameter x.qt incremented quantity. (the pipe multiplies x.price * x.qt)

(component.html) {{x.price|totalperitem:x.qt}}

the problem global total won't update values have been returned filters.

{{shoppingarray|calculatetotalpipe}}

calculatetotalpipe loops whole array adding totals, somehow initial total corrrect modifications subtotals don't take effect.

is there way refresh shoppingarray calculatetotalpipe generates updated total?

is there better approach this?

thanks!

andres cautious usage of impure pipes. written in documentation:

angular executes impure pipe during every component change detection cycle. impure pipe called often, every keystroke or mouse-move.

this means, every time user move mouse or scroll page total amount recalculated. introduce performance issues.

i advise find way of implementing total without using pipe. why not use simple service?