Ionic v3 incrementQty increases all products

Ionic Framework ionic-v3
1

Hey guys!

I am a student and I need a little bit of a help with increment and decrement.
When I want to change inc or dec for 1 of the products, it keeps changing for all of them.

TS:


import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
    selector: 'page-home',
    templateUrl: 'home.html'
})
export class HomePage {
    todos: string[] = [];
    todo: string;
    item_qty:any;

    constructor(public navCtrl: NavController) {
        this.item_qty=1;
    }

    add() {
        this.todos.push(this.todo);
        this.todo = "";
    }

    delete(item) {
        var index = this.todos.indexOf(item, 0);
        if (index > -1) {
            this.todos.splice(index, 1);
        }
    }

    incrementQty() {  
        this.item_qty += 1;
        console.log(this.item_qty + 1);
        }

     decrementQty() {
         if(this.item_qty-1 < 1){
              this.item_qty = 1;
             console.log('item_1->' + this.item_qty)
            }
             else{
             this.item_qty -= 1;
             console.log('item_2->' + this.item_qty);
            }
      }
}

HTML:

> <ion-header>
>   <ion-navbar>
>       <ion-title>
>           Popis za kupnju
>       </ion-title>
>   </ion-navbar>
> </ion-header>
> 
> <ion-content>
>   <ion-item>
>       <ion-input [(ngModel)]="todo" placeholder="Napisi stvari za kupovinu" type="text"></ion-input>
>   </ion-item>
> 
>   <button ion-button full (click)="add()">Dodaj</button>
> 
>   <ion-list>
>       <ion-item-sliding *ngFor="let t of todos;">
>           <ion-item>
>               {{t}}
>               <button clear (click)="incrementQty()"><ion-icon name="add-circle"></ion-icon></button>
>              {{item_qty}}
>              <button clear (click)="decrementQty()"><ion-icon name="remove-circle"></ion-icon></button>
>           </ion-item>
> 
>           <ion-item-options side="right">
>               <button ion-button color="danger" (click)="delete(t)">
>                   <ion-icon name="trash"></ion-icon> Delete
>               </button>
>           </ion-item-options>
>       
>       </ion-item-sliding>
>   </ion-list>
> </ion-content>

Would be very thankful if someone can help.

Sincerely,
Luka Crneli.

2

Post textual information as text.

3

Sorry, did fix it. Do you know how should i fix my problem?

4

You have the same problem as is described here.