Question

我愿意在我的Angular2应用中实现添加到购物车按钮，目前我可以在JavaScript / Jquery中实现;但是，我不知道如何实现Angular2。

这是工作代码的JSfiddle：

   $(document).ready(function() {
           $(".up").on('click',function(){
           var $incdec = $(this).prev();
           if ($incdec.val() < $(this).data("max")) {
            $incdec.val(parseInt($incdec.val())+1);
           }
       });

     $(".down").on('click',function(){
        var $incdec = $(this).next();
        if ($incdec.val() > $(this).data("min")) {
          $incdec.val(parseInt($incdec.val())-1);
        }
       });
      });

http://jsfiddle.net/mail2asik/M8JTP/

我想做同样的事情，但是在Angular2中。

有什么想法吗？

Answer 1

您可以使用简单的javascript来实现该功能。

export class HelloWorld {
  public amount: number = 1;

  addToCart() {
    this.amount = 1;
  }



  addItem() {
    if (this.amount == 5) {
      this.amount = 5;
    }
    else {
      this.amount = this.amount + 1;
    };
  }



  removeItem() {
    if (this.amount == 0) {
      this.amount = 0;


    } else {
      this.amount = this.amount - 1;
    };
}


}

HTML：

  <button (click)="addToCart()">ADD item</button>

  <br>
  <br>
   <button (click)="removeItem()" class="btnSign">Down</button> 
 <input type="text" class="incdec" value="{{amount}}"/>
 <button (click)="addItem()" class="btnSign">Up</button>

Here is the example in the plunker

Answer 2

另一种答案是将文本输入声明为变量并“直接”更新它

HTML“组件模板”

<tr>
   <td>
     <input type="button" (click)="dec(elem)" value="Down"/>
     <input type="text" #elem value="0"/>
     <input type="button" (click)="inc(elem)" value="Up"/>
  </td>
</tr>

JS

      inc(elem)
      {
        var nItem = parseInt(elem.value);
        if(nItem < 5)
        {
          nItem +=1;
          elem.value = nItem;
        }
      }

      dec(elem)
      {
        var nItem = parseInt(elem.value);
        if(nItem > 0)
        {
          nItem -=1;
          elem.value = nItem;
        }
      }

Here是一个有效的Plunker ^^

我怎样才能将这个JS翻译成Angular2？

2 个答案:

HTML“组件模板”

JS