Question

我有一个应用程序，允许用户增加或减少项目的库存数量。单击增量或减量按钮时， all 会立即更改项目。只有已点击行中的项目才会更改。我做错了什么？

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

由于列表是一个项目数组，因此项目的数量也应该出现在列表中。只有一个数量属性意味着它会影响整个列表。

我相信快速订单数组现在看起来像这样

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

解决此问题的一种方法是为每个项目设置一个数量属性，以便quickOrder数组看起来像

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

增量和减量函数也采用类似于删除函数的索引。增量功能如下所示

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

更好的选择是构造一个单独的quickOrderItem组件，该组件包含自己的递增和递减函数，并使用当前组件作为它的容器。

希望这有帮助。

Answer 2

<ion-card *ngFor="let product of cart; let index=index">

<strong> ₹ {{ item_qty *  product.price  }}</strong>

<ion-card>


import { Component, OnInit } from '@angular/core';
import {  NavController, NavParams } from 'ionic-angular';

@Component({
selector: 'page-cart',
templateUrl: 'cart.html',
})
export class CartPage implements OnInit {

item_qty:any;

constructor()
{this.item_qty=1;}

// increment item 
inc(){
this.item_qty += 1;
console.log(this.item_qty + 1);
}

//decrements item

dec(){
if(this.item_qty-1 < 1){
this.item_qty = 1;
console.log('item_1->' + this.item_qty)
}
else{
this.item_qty -= 1;
console.log('item_2->' + this.item_qty);
}
}

}

基于id（S.NO）增加和减少项目数量

2 个答案: