angular - Increment and decrements item quantity based on id (S.NO) -
i have app in allows user increment or decrement in-stock quantity of item. when click increment or decrement button, all items changed @ once. item clicked row should changed. doing wrong?
html code
<ion-content class="item"> <ion-list *ngif="showlist"> <ion-item *ngfor="let item of items"> {{ item }} </ion-item> </ion-list> <ion-list> <div class="header"> <ion-item> <ion-row > <ion-col width-15>sno</ion-col> <ion-col width-25>partno</ion-col> <ion-col width-25>qty</ion-col> <ion-col width-15>price</ion-col> <ion-col width-20>action</ion-col> </ion-row> </ion-item> </div> <div class="list"> <ion-item *ngfor="let list of quickorder; let = index"> <ion-row> <ion-col width-15>{{list.sno}}</ion-col> <ion-col width-25>{{list.partno}}</ion-col> <ion-col width-25 class="add"> <button clear (click)="incrementqty()"><ion-icon name="add-circle" ></ion-icon></button>{{qty}} <button clear (click)="decrementqty()"><ion-icon name="remove-circle" ></ion-icon></button> </ion-col> <ion-col width-15>{{list.price}}</ion-col> <ion-col width-20><button clear (click)="delete(i)"><ion-icon name="close-circle"></ion-icon></button></ion-col> </ion-row> </ion-item> </div> </ion-list> <br><br><br><br><br><br><br> <div class="addtocart"> <center><button padding (click)="addtocart();">add cart</button></center> </div> </ion-content>
.ts file
import { component} '@angular/core'; import { navcontroller, slides} 'ionic-angular'; @component({ templateurl: 'build/pages/titlepage/titlepage.html', }) export class titlepage { qty:any; constructor(private nav: navcontroller) { this.qty = 1; } // increment product qty incrementqty() { console.log(this.qty+1); this.qty += 1; } // decrement product qty decrementqty() { if(this.qty-1 < 1 ){ this.qty = 1 console.log('1->'+this.qty); }else{ this.qty -= 1; console.log('2->'+this.qty); } } }
since list array of items, quantity of items should present in list well. having 1 quantity attribute means impacts entire list.
i believe quick order array looks now
[{sno: 1, partno: s23456, price: 2500}, {...}, ...]
one way of solving have quantity attribute each item quickorder array looks like
[{sno: 1, partno: s23456, price: 2500, qty: 3}, {...}, ...].
and increment , decrement functions take index similar delete function. increment function shown below
incrementqty(index: number) { this.quickorder[index].qty += 1; }
a better option construct separate quickorderitem component contains own increment , decrement functions , use current component container it.
hope helps.
Comments
Post a Comment