0

estoy comenzando con esto de programación de aplicaciones móviles con Angular v8 e Ionic v5 y tengo un problema.

Necesito incrementar y decrementar un producto de una lista que fue barrida por un ngFor.

  <ion-item>
    <ion-label>Elija los artículos</ion-label>
  </ion-item>

  <ion-list *ngFor="let item of plato">
    <ion-item>
      <ion-label style="text-align: center;">{{item.nombreCat}}</ion-label>

    </ion-item>

    <app-articulo-hijo [art]="item.articulos"></app-articulo-hijo>
  </ion-list>

Tengo un modal que me muestra la categoría como se puede apreciar

{{item.nombreCat}}

, y llama a un componente hijo que muestra todos los artículos de cada categoría.

[art]="item.articulos"

En el artículo hijo tengo el siguiente código, uso un ngFor para recorrer el arreglo.

<ion-list *ngFor="let item of art">
  <ion-row>
    <ion-col size="6">
      <ion-item >
       <ion-card-content class="ion-no-padding"
                         (click)="aumentar()">
          <ion-card-title>
           {{ item.nombreArt }}
          </ion-card-title>
        </ion-card-content>
      </ion-item>
    </ion-col>  
<ion-col size="3">
  <ion-item class="ion-no-padding">
    <ion-card-content class="ion-no-padding">
      <h2>${{ item.precio }}</h2>
    </ion-card-content>
  </ion-item>
</ion-col>

   <ion-col size="3">
     <ion-item class="ion-no-padding">
      <ion-card-content class="ion-no-padding">
         <ion-buttons>
            <h2>{{ canti }}</h2>
            <ion-button
              (click)="disminuir()"
              color="light"
              fill="outline"
              color="tertiary">              
             <ion-icon name="menu"></ion-icon>
           </ion-button>
          </ion-buttons>
       </ion-card-content>
      </ion-item>
     </ion-col>
    </ion-row>
</ion-list>

En

<h2>{{ canti }}</h2>

Se supone que tiene que mostrar la cantidad que seleccione cada vez que se toque el nombreArt

En el .ts tengo lo siguiente:

    canti: number = 0;
     constructor(private navParams: NavParams) {

     }

     aumentar(){
      this.canti ++;
     }

     disminuir(){
      if ( this.canti > 0 ){
      this.canti--;
     }
    }

Lo que obtengo:

introducir la descripción de la imagen aquí

Cuando se toca un producto, la cantidad se aumenta para todos los productos pertenecientes a esa categoría, ¿Cómo puedo hacer para que cuando se toque solamente se incremente un solo producto por separado y se muestre en {{canti}}?

1 respuesta 1

0

Intenta agregando parametros a tu funcion disminuir e incrementar y pasale el item de tu ngFor

    disminuir(item: any) {
     if (item.canti == undefined){
               item.canti = 0;
        } else if(item.canti != undefined && item.canti >0){
               --item.canti;
        }
    }

    aumentar(item: any) {
        if (item.canti == undefined){
               item.canti = 1;
        } else if(item.canti != undefined){
               ++item.canti;
        }    
     }

    <ion-card-content class="ion-no-padding"
                     (click)="aumentar(item)">

    <ion-button
          (click)="disminuir(item)"
          color="light"
          fill="outline"
          color="tertiary">

Elimina la variable canti: number = 0; que por lo que se ve no la contiene ninguno de los items de tu arreglo, en la funcion incrementar y disminuir hay que revisar si inicialmente existe la propiedad en el objeto, d elo contrario se la agregas inicializandola con un valor

De lado de la vista hay que mostrar canti de tu item pero como no existe al inicio hay que protegerla para que aparezca un 0 antes de existir

<h2>{{ (item?.canti) ? item.canti: 0 }}</h2>
2
  • Muchas gracias, sirvió de mucho. Una pregunta, ¿Cómo puedo obtener los ítems que se han escogido con su respectiva cantidad? Muchas gracias
    – Aleksander
    el 25 ene. 2020 a las 22:32
  • Si tienes o piensas colocar otro boton que ejecute alguna funcionalidad puedes crear una variable haciendo un filter a tu arreglo art y quedaria algo asi let items = art.filter( f => f.canti != undefined && f.canti >0)
    – LordOfLies
    el 27 ene. 2020 a las 15:19

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.