ID番号（S.NO）に基づいてアイテム数を増減します

Question

私はユーザーがアイテムの在庫量を増減できるアプリを持っています。増分または減分ボタンをクリックすると、すべてアイテムが一度に変更されます。クリックされた行の項目のみが変更されます。私は間違って何をしていますか？

HTMLコード

<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 i = 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 to Cart</button></center> 
    </div>  
</ion-content> 

.TSリスト項目の配列であるので、アイテムの量が中に存在しなければならない

import { Component} from '@angular/core'; 
import { NavController, Slides} from '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); 
    } 
    } 
} 

Answer 1

ファイルリストも同様です。 1つのquantity属性を持つことは、リスト全体に影響を与えることを意味します。

私は迅速な順序配列は次のようになりますと信じて、今

[{SNo: 1, PartNo: S23456, Price: 2500}, {...}, ...] 

quickOrder配列が

[{SNo: 1, PartNo: S23456, Price: 2500, qty: 3}, {...}, ...]. 

のように見えるように、各アイテムの数量属性を持っているだろう、これを解決する1つの方法また、インクリメント機能とデクリメント機能は、削除機能に似たインデックスを使用します。インクリメント機能は、より良いオプションは、独自のインクリメントとデクリメント関数を含む別quickOrderItemコンポーネントを構築し、それのためのコンテナとして現在のコンポーネントを使用することであろう

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

下に示されています。

これが役に立ちます。