Add Increment and Decrement Product for Each Product

Ionic Framework Ionic Angular
1

Good Day! I want to implementing a feature that after customers clicking “Add to cart” Button, the increment and decrement product amount will show up. below is my code:

<ion-slide *ngFor="let product of cat.products">
          <ion-card class="flat-card ion-no-padding ion-no-margin">
            <img src="{{image_link+product.filename}}" class="product-img">
            <ion-card-header>
              <h6>
                <ion-text color="dark">{{product.name}}</ion-text>
              </h6>
              <ion-text color="medium" *ngIf="product.old_price" style="text-decoration:line-through">
                {{product.old_price |  currency: 'Rp '  : 'symbol' : '1.0-0'}}</ion-text>
              <ion-text *ngIf="!product.old_price">&nbsp;</ion-text>
              <br>
              <strong>
                <ion-text color="success">{{product.price |  currency: 'Rp '  : 'symbol' : '1.0-0'}} /
                  {{product.unit}}
                </ion-text>
              </strong>
            </ion-card-header>
            <ion-card-content>
              <!-- <div *ngIf="!getProductCount(product)"> -->
                <ion-button expand="full" (click)="addToCart(product)">Beli</ion-button>
              <!-- </div> -->

              <!-- INCREMENT AND DECREMENT BUTTON-->
              <div *ngIf="getCartProductCount(product) > 0">
                <ion-row>
                  <ion-col>
                    <ion-button (click)="decreaseCartItem(product)">
                      <ion-icon name="remove-outline" ></ion-icon>
                    </ion-button>
                  </ion-col>
                  <ion-col>
                    <ion-text>{{ getCartProductCount(product) }}</ion-text>
                  </ion-col>
                  <ion-col>
                    <ion-button (click) ="addToCart(product)">
                      <ion-icon name="add-outline" ></ion-icon>
                    </ion-button>
                  </ion-col>
                </ion-row>
              </div>

            <!-- END INCREMENT AND DECREMENT BUTTON -->
            </ion-card-content>
          </ion-card>
        </ion-slide>

After clicking Add To Cart button, below image is what i expected:

Expected
Expected900×556 5.02 KB

But i got below image:

Real
Real895×556 5.42 KB

When i clicked add to cart button at the first product, the increment and decrement button is appearing, but they’re not when i clicked the second product. it will appear if i decrease the first product amount till 0.

Im sorry for my bad explanation. Im trying my best to explain my problem. any help would be appreciated. Thanks!

2

You determine whether to display the buttons based on what getCartProductCount returns. Assuming that’s really the right determinant, you are asking why addToCart does not affect getCartProductCount as desired. Anybody attempting to answer that question would need to see both addToCart and getCartProductCount.