增加购物车中的产品数量

时间:2017-08-30 08:53:53

标签: angular typescript

将产品添加到购物车后,我无法提高产品数量。我会一步一步地告诉你。

1-我列出了我的产品。

2-我正在创建数量缩写函数(miktarKisalt)

3-如果可以称量产品,我会简化馏分。

4-然后我创建执行递增和递减操作的函数。 (miktarArttir,miktarAzalt)

5 - 更新物品数量后,将重新加载购物车清单并显示新数量的产品

我想要的是:

如果您按下加号和减号按钮而不必加载购物车列表并且新号码和当前产品数量已更新

我该怎么做?

enter image description here

            <div class="count-input space-bottom">
                            <a class="incr-btn" (tap)="miktarAzalt(list.ID, list.MIKTAR, list.FIYAT, list.TUTAR, list.TARTILI) ">–</a>
                            <input class="quantity" readonly type="text" [(ngModel)]="MIKTARMODEL[i]" [value]="miktarAtamaFunc((list.TARTILI == 'E' ? miktarKisalt(list.MIKTAR) : list.MIKTAR),i)" name="quantity" />
                            <a class="incr-btn"  (tap)="miktarArttir(list.ID, list.MIKTAR, list.FIYAT, list.TUTAR, list.TARTILI, i)">+</a>
       </div>

MiktarKisalt功能

MIKTARMODEL : Array<number> = [];

   
miktarAtamaFunc(MIKTAR, INDEX){
 this.MIKTARMODEL[INDEX]= MIKTAR;

}
miktarKisalt(MIKTAR){
        var miktar = Number(MIKTAR);
        return miktar.toFixed(1);
      }

miktarArttir功能

 miktarArttir(ID, MIKTAR, FIYAT, TUTAR, TARTILI){

      let header = new Headers();
      header.append("Content-Type","application/json");
      header.append("Accept","application/json");
      
      var arttirici=1;
      if(TARTILI == "E"){
        MIKTAR = parseFloat(MIKTAR);
        arttirici = 0.1;
      }

      MIKTAR += arttirici;
     this.MIKTARMODEL[INDEX] += arttirici;
     
     var siparisDetayUpdate = "http://sitename.com/function";
     var siparisDetayVeri = JSON.stringify({
       DETAYID : ID,
       MIKTAR : MIKTAR,
       ACIKLAMA : 0
     });

     this.http.post(siparisDetayUpdate,siparisDetayVeri,header).map(res=>res.json()).subscribe(data=>{
       
         this.sepetListesi(); // RELOAD CART LIST

     }, (error)=>{
       this.miktarArttir(ID, MIKTAR, FIYAT, TUTAR, TARTILI);
     });
    
    }

2 个答案:

答案 0 :(得分:1)

要在不加载的情况下更新列表,请使用ngModel。

我为你做了plnkr的例子。

<input type="text" [(ngModel)]="list">

https://plnkr.co/edit/t6jEbCFY1ONH27PYQwz1?p=preview

答案 1 :(得分:0)

你可以实现这一目标的方法是嵌套一个 Div标签&lt; * ngIf =&#34; flag&#34;&gt; ,有一个标志变量,每当按 inc或dec按钮 调用函数并将布尔变量更改为 TRUE ,然后该值将反映。