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:
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}}?