Con Angular
En mi view muestro en una tabla
la lista de los productos que el usuario seleccionó para comprar. Por cada fila
hay un producto con un input number
para aumentar la cantidad si es que lo desea. Si el usuario aumenta o disminuye la cantidad en el input, se activa la función totalPrice()
para calcular el precio total.
El problema que estoy teniendo es que: si por ejemplo por cada producto aumento la cantidad de cualquier input number
, el precio total aumenta, pero al disminuir la cantidad de cualquier input, el precio total se mantiene con el mismo valor que tenia previamente. Solo cambia el resultado del precio cuando aumento la cantidad de cualquier input.
Aca component.ts
constructor() {
this.buildForm();
// Obtengo todo los productos seleccionados
if (localStorage.getItem('shoppingCart') != null) {
this.bookList = JSON.parse(localStorage.getItem('shoppingCart'));
// calculo el precio total de todos los productos seleccionados
this.total = this.bookList
.map(item => Number(item.price))
.reduce((count, item) => count + item, 0);
}
}
totalPrice(event: any, bookPrice: number) {
const quantity = event.target.value;
this.total = (this.total - bookPrice) + (quantity * bookPrice);
}
Aca component.html
<div *ngIf="bookList as libros">
<table *ngIf="libros.length > 0" class="table table-striped">
<thead>
<tr>
<th class="text-center"></th>
<th class="text-center">Producto</th>
<th class="text-center">Cantidad</th>
<th class="text-center"></th>
</tr>
</thead>
<tbody>
<tr *ngFor="let b of libros; index as i">
<td class="text-center align-middle"><img [src]="linkImg(b.url_image)" class="img-book"></td>
<td class="text-center align-middle">
<b>{{ b.name }}</b> <br>
{{b.autor}} <br>
{{b.price | currency}}
</td>
<!------------- ACA EL INPUT NUMBER --------------------->
<td class="text-center align-middle">
<input type="number"
(click)="OnInput($event, b.price)"
id="quantity" value="1"
name="quantity"
min="1"
max="5">
</td>
<td class="text-center align-middle">
<button mat-mini-fab color="primary" (click)="deleteItem(b.id_book)">
<mat-icon>delete</mat-icon>
</button>
</td>
</tr>
</tbody>
</table>
</div>