I'm making my first Ionic App (Ionic 6) and Angular. The app is a shop. I'm trying to make a number input field with and - buttons to increase quantity. The problem I'm facing is that my and - buttons don't work. If I use the arrows that appear near the number (I think they are default html browser up and down arrows from every number input field) the number increases and the final price calculation works. But clicking on my and - buttons does nothing... no error in compiler and no error in browser console..

Here is the image of layout and my code:

subcategory.page.html:

          <ion-list>
        <ion-item  *ngFor="let produkt of produktiData;let i = index">
          <ion-grid>
            <ion-row>
              <ion-col size="12">
                <ion-label>
                  <div >
                    <h2>{{ (produkt.name | slice:0:15)   '...' }}</h2>
                    <p>{{ produkt.price }} <span >€/{{produkt.enotaMere}}</span></p>
                  </div>
                </ion-label>
              </ion-col>
            </ion-row>
            <ion-row>
              <ion-col size="3">
                <ion-avatar slot="start">
                  <img src="/assets/images/spinach.png"  alt="{{produkt.id}} {{produkt.name}}"/>
                </ion-avatar>
              </ion-col>
              <ion-col size="9">
                <ion-label>
                  <div >
                    <div >
                      <p >{{ produkt.id }}</p>
                      <p >EM: {{ produkt.enotaMere }}</p>
                      <p >Pakiranje: {{ produkt.grammage }} {{produkt.enotaMere}}</p>
                    </div>
                    <div >
                      <ion-item lines="none" slot="end">
                        <ion-icon name="add-circle" (click)="incrementQty(i)"></ion-icon>
                        <ion-input type="number" min="0" [(ngModel)]="produkt.qty"></ion-input>
                        <ion-icon name="remove-circle" (click)="decrementQty(i)"></ion-icon>
                      </ion-item>
                    </div>
                    <div >
                      <p><strong>{{produkt.qty*produkt.price}}€</strong></p>
                    </div>
                  </div>
                </ion-label>
              </ion-col>
            </ion-row>
          </ion-grid>
        </ion-item>
      </ion-list>

Here is the subcategory.page.ts code:

    export class SubcategoryPage implements OnInit {
  produkti: any = {
    data: [
      {
        id: 460251,
        name: 'Špinača list briketi ZM',
        enotaMere: 'kg',
        grammage: 2.5,
        unitsPerEM: 10,
        unitsPerCarton: 4,
        price: 1.25,
        qty: 1,
        stock: 100,
        description: 'Lorem ipsum product description...',
      },
    ],
  };
  produktiData = this.produkti.data;

  constructor() {
    this.produkti = this.produktiData.map(produkti => {
      produkti.qty = 0;
      return produkti;
    });
  }

  ngOnInit() {
  }

  incrementQty(index: number) {
    this.produkti[index].qty  = 1;
  }

  decrementQty(index: number) {
    this.produkti[index].qty -= 1;
  }

}

What have I done wrong? wheree is the problem that the buttons don't work? Please help :)

CodePudding user response：

Your buttons refer to produktiarray, while you loop produktiData array in your template. Try to loop produktiin your template instead.

<ion-item *ngFor="let produkt of produkti;let i = index">

CodePudding user response：

This is not an ionic issue, your logic for the increment is the issue.