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?

enter image description here

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

Popular posts from this blog

mysql - Dreamhost PyCharm Django Python 3 Launching a Site -

java - Sending SMS with SMSLib and Web Services -

java - How to resolve The method toString() in the type Object is not applicable for the arguments (InputStream) -