0

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>

1 respuesta 1

1

Un par de cosas a mencionar:

Primero: al crear un <input> para cada libro, la estructura y sus declaraciones se repetirán las veces que corresponda. En este caso, cuando especificas la id del elemento HTML, esta se estaría repitiendo resultando en varios elementos HTMLInputElement con el mismo valor para id;

Segundo, cada input estaría ejecutando una función llamada OnInput(...) al momento en el que se haga click en dicho elemento.

Sobre esto último, y según lo que explicaste, el evento que debería ser "escuchado" tendría que ser input o change. Dependiendo de que tipo de cambio necesitas manejar. Con (input) controlas el evento que se genera en función del momento en el que se escribe algo en el elemento. Mientras que (change) se lanza cuando la modificación finaliza. Es decir, después de finalizado el cambio de estado del elemento.

Ahora bien, cuando modificas total, lo único que estás controlando es cuando aumenta con magnitud de 1 unidad:

this.total = (this.total - bookPrice) + (quantity * bookPrice);

Debido a esto, cabe mencionar que este caso tiene un problema de diseño, total en ningún momento se relaciona con el listado de libros (al menos según el código proporcionado), sino que es modificado según su propio valor y el valor relativo a la cantidad especificada en el input. Es por ello que en este caso, total NUNCA se ajusta a la baja, y sólo considera una modificación, al momento de disminuir, de 1 dígito con valor absoluto de 1 unidad. Esto se refleja en la expresión this.total - bookPrice, la cual es equivalente a this.total - (quantity * bookPrice), tal que quantity sea igual a 1.

Sin embargo, lo que puedes hacer es iterar el carrito de compras, PERO es importante que dispongas de algún identificador único para cada libro, ya sea un id, SKU, itemCode, código de inventario, o lo que sea; lo importante es que nos permita identificar un libro en específico, desntro de este arreglo.


Empezamos con nuestra template, que, en este caso, nos basaremos en la ya existente:

Entendiendo que tenemos un *ngFor="let book of bookList;" en nuestro <tr> con book teniendo una estructura con, al menos, las propiedades:

{
  id: string, // Lo ocuparemos como "id"
  price: number,
  quantity: number // Debería ser inicializada con valor 1
}
<td class="text-center align-middle">
  <input type="number"
         [id]="book.id"
         [name]="book.id"
         [value]="book.quantity.toString()"
         min="1" 
         max="5"
         (change)="updateItem($event, book.id)">
</td>

Ahora, debemos considerar en el component.ts, lo siguiente:


  public bookList: {
    id: string,
    price: number,
    quantity: number
  }[] = [
    {
      id: 'book0',
      price: 18.23,
      quantity: 1
    },
    {
      id: 'book1',
      price: 24.78,
      quantity: 1
    }
  ];

  // ...

  public updateItem(event: Event, itemId: string | number): void {
    for (const book of this.bookList) {
      if (book.id === itemId as string) {
        let currentQuantity = parseFloat((event.target as HTMLInputElement).value);
        if (currentQuantity > 5) { // Validamos el máximo de 5 unidades
          currentQuantity = 5;
        }
        if (currentQuantity < 1) { // Validamos el mínimo de 1 unidad
          currentQuantity = 1;
        }
        (event.target as HTMLInputElement).value = currentQuantity.toString(); // Forzamos el valor según las validaciones
        book.quantity = currentQuantity;
        break;
      }
    }
    this.calculateTotalPrice();
  }

  public calculateTotalPrice(): void {
    let newTotal = 0;
    for (const book of this.bookList) {
      newtotal += book.quantity * book.price;
    }
    this.total = newTotal;
  }

Con ello, tendrás un total dinámico, ajustado a todos los casos en el que se modifique la cantidad para cada libro.

Si tu carro de compras no posee una propiedad quantity o cantidad, ni tampoco una "id", lo que puedes hacer es generar un arreglo a partir de tu carrito, pero eso ya es otra cosa.

Si el caso es esto último, sería genial que proporcionaras más detalles de la estructura de los elementos del carrito de compras.

4
  • Gracias por tu aporte y excelente aclaracion @KBeDev !!, pero surge un problema con tu código, y es cuando inicia, por ejemplo si tengo 2 filas e intento por 1ra vez aumentar la cantidad de cualquier input number, el precio total desaparece de la view, Cuando lo intento por 2da vez (es decir, vuelvo a pulsar cualquiera de los input number), recien ahi se muestre el precio actualizado, y apartir de alli funciona bien ya que si aumento o disminuyo la cantidad en cualquier fila, el precio se sigue actualizando sin desaparecer.
    – Claudio
    Commented el 6 ene. 2021 a las 2:17
  • Seguramente, alguno de los valores numéricos está como Nan, undefined o null. En cuyo caso, tendrías que agregar un valor por defecto. Todo depende del valor inicial de los elementos del carrito. Por otro lado, si el problema es el momento en el que se detecta el cambio, puede que sea debido a que el evento (change) sólo ejecuta la función de callback cuando el input ya ha sido cambiado.
    – KBeDev
    Commented el 6 ene. 2021 a las 2:40
  • De todos modos, actualicé la respuesta con un arreglo de ejemplo con valores predefinidos.
    – KBeDev
    Commented el 6 ene. 2021 a las 2:44
  • gracias @KBeDev! tenias razón, tenia valores como Nan,null, undefined. Ahora funciona perfecto. hice un pequeño cambio en la funcion updateItem() en if (book.id === itemId as string), lo cambie por if (book.id_book === itemId) ya que mi book.id_book es de tipo number. Muchas gracias por tu aporte y aclaraciones !
    – Claudio
    Commented el 6 ene. 2021 a las 15:06

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.