Angular 递增或递减计数

Question

我正在构建一个 Angular 5 应用程序来跟踪利润。我的应用程序有多个输入字段。

如果我卖巧克力，那么我会按 + 按钮来增加数量。

如果我出售 Wine，那么我会按 Wine 输入旁边的 + 按钮来增加数量。

现在我已经使用 incrementchoc() 函数来增加巧克力的数量和 incrementwine() 函数来增加酒的数量。

下面是我的 HTML :

 <div >
                <label>Chocolate:</label><br>
            <div class="input-group">
              <span class="input-group-btn">
                  <button type="button" class="btn btn-danger btn-number" (click)= "decrementchoc()" data-type="minus" data-field="quant[2]">
                    <span class="glyphicon glyphicon-minus"></span>
                  </button>
              </span>

              <input type="text" name="quant[2]" [(ngModel)]="info.choco" (keyup)="choc(info.choco)" class="form-control input-number" value="{{info.choco}}" >

              <span class="input-group-btn">
                  <button type="button" class="btn btn-success btn-number"  (click)= "incrementchoc()" data-type="plus" data-field="quant[2]">
                      <span class="glyphicon glyphicon-plus"></span>
                  </button>
              </span>
          </div></div>



<div >
                    <label>Wine:</label><br>
                <div class="input-group">
                  <span class="input-group-btn">
                      <button type="button" class="btn btn-danger btn-number" (click)= "decrementwine()" data-type="minus" data-field="quant[3]">
                        <span class="glyphicon glyphicon-minus"></span>
                      </button>
                  </span>

                  <input type="text" name="quant[3]" [(ngModel)]="info.wine" (keyup)="wine(info.wine)" class="form-control input-number" value="{{info.wine}}" >

                  <span class="input-group-btn">
                      <button type="button" class="btn btn-success btn-number"  (click)= "incrementwine()" data-type="plus" data-field="quant[3]">
                          <span class="glyphicon glyphicon-plus"></span>
                      </button>
                  </span>
              </div></div>

我还要附上一张图片。 This is how my HTML looks like with the - and + buttons

下面是我的 Component.ts 文件的代码

 incrementchoc(){
    this.info.choco= ++this.info.choco;
  }

  decrementchoc(){
    this.info.choco= --this.info.choco;
  }


   incrementwine(){
    this.info.wine= ++this.info.wine;
  }

  decrementwine(){
    this.info.wine= --this.info.wine;
  }

从上面的代码中可以清楚地看到，如果我有n个输入字段，那么我将不得不编写n个递增和递减函数。我认为这会使应用程序非常繁重。

请建议我一个更好的方法，通过使用单个函数来增加和减少值，方法是检测输入的 ngModel 并且 incrementing/decrementing 仅该值而不是编写 n 个函数。

Answer 1

是的，目前的方法让它变得很重。你可以这样做：

increment(value: string) {
  if(value === 'wine') {
      this.info.wine = ++this.info.wine;
    }else if (value === 'choc'){
      this.info.choco= ++this.info.choco;
    }else{
      this.info.gir = ++this.info.gir;
    }
}

<button type="button" class="btn btn-success btn-number"  (click)= "incrementwine(wine)" data-type="plus" data-field="quant[3]">
    <span class="glyphicon glyphicon-plus"></span>
 </button>

同减
* 我没有检查代码的逻辑..只是重构了。

Answer 2

您可以直接在组件模板中进行自增自减操作。您不需要为这些使用组件代码。

例如：

<button type="button" class="btn btn-danger btn-number"
        (click)="info.choco = info.choco - 1" data-type="minus" data-field="quant[2]">
    <span class="glyphicon glyphicon-minus"></span>
</button>

完整代码：

<div>
    <label>Chocolate:</label><br>
    <div class="input-group">
        <span class="input-group-btn">
            <button type="button" class="btn btn-danger btn-number"
                    (click)="info.choco = info.choco - 1" data-type="minus" data-field="quant[2]">
                <span class="glyphicon glyphicon-minus"></span>
            </button>
        </span>

        <input type="text" name="quant[2]" class="form-control input-number"
                [(ngModel)]="info.choco" (keyup)="choc(info.choco)" value="{{info.choco}}" >

        <span class="input-group-btn">
            <button type="button" class="btn btn-success btn-number"
                    (click)="info.choco = info.choco + 1" data-type="plus" data-field="quant[2]">
                <span class="glyphicon glyphicon-plus"></span>
            </button>
        </span>
    </div>
</div>

<div>
    <label>Wine:</label><br>
    <div class="input-group">
        <span class="input-group-btn">
            <button type="button" class="btn btn-danger btn-number"
                    (click)="info.wine = info.wine - 1" data-type="minus" data-field="quant[3]">
                <span class="glyphicon glyphicon-minus"></span>
            </button>
        </span>

        <input type="text" name="quant[3]" class="form-control input-number"
                [(ngModel)]="info.wine" (keyup)="wine(info.wine)" value="{{info.wine}}">

        <span class="input-group-btn">
            <button type="button" class="btn btn-success btn-number"
                    (click)="info.wine = info.wine + 1" data-type="plus" data-field="quant[3]">
                <span class="glyphicon glyphicon-plus"></span>
            </button>
        </span>
    </div>
</div>

Angular 递增或递减计数

Angular increment or decrement count

increment

decrement

angular