Ionic 2 使用 Ngfor 计算

Question

我正在使用离子 2。

我开发了电子商务应用程序。

我需要计算总金额。

这是我的模板（购物车页面）。

PRICE_REGULAR是产品正常价格，PRICE_SALE是产品销售价格。如果我需要增加产品数量，我调用方法countOperator(1,p)

Price 是数量，PRICE_SALE 是价格。

<ion-row class="apply-coupon" *ngFor="let p of Cartproducts;let i=index">
    <ion-col col-4>
        <img src="{{p.P_IMAGES[0].URL}}" alt="product2">
    </ion-col>
    <ion-col col-8>
        <h1>{{p.P_TITLE}}</h1>
        <p class="subtitle">Subtitle</p>
        <p class="code">Code: 123</p>

        <div>
            <ion-row>
                <ion-col width-50>
                    <button ion-button outline small><ion-icon name="add" (click)="countOperator(1,p)"></ion-icon></button>
                </ion-col>
                <ion-label text-center>{{count}}</ion-label>
                <ion-col width-50>
                    <button ion-button outline small><ion-icon name="remove" (click)="countOperator(-1,p)"></ion-icon></button>
                </ion-col>
            </ion-row>  
            <span><img src="./assets/images/rupee-black.svg" alt="Rupee">{{p.PRICE_REGULAR}}</span>

            <span *ngIf="Pid == p.C_ID"><img src="./assets/images/rupee-black.svg" alt="Rupee">{{Price}}</span>


            <span text-right><img src="./assets/images/rupee-black.svg" alt="Rupee">{{p.PRICE_SALE}}</span>
        </div>

        <div>
            <button (click)="cancel(i)">Cancel X</button>
        </div>
    </ion-col>  
</ion-row>

这是我的 countOperator 方法

countOperator(operator,s){
if(this.count >= 1){
      this.show1=false;
      this.count += operator;
      this.Price=this.count * Amount;
      this.change2(this.Price);
    }
    if(this.count < 1){
      this.show1=false;
      this.count = 1;
      this.Price=this.count * Amount;
      this.change2(this.Price);
    }
}

当我点击+ 图标时，产品数量和数量会增加。

请多多指教，

谢谢。

Answer 1

您应该使用对象。 创建类产品：

export class Product{
  priceRegular: number;
  priceSale: number;
  quantity: number;  
}

Cartproducts: Array<Product>=[...];
totoAmount = 0;
//countOperator should be passed product object:
countOperator(product:Product, number:number){
  product.quantity += number;
  this.totalAmount=0;
  for(let i=0; i<= this.Cartproducts.length; i++){
    this.totoAmount+= this.Cartproducts[i].quantity * this.Cartproducts[i].priceSale;
  }
  //Now you have total amount
  console.log(this.totalAmount);
}

请注意：上面的代码只是不完整的示例。您需要对其进行编辑以适合您的情况。