Angular 5利润追踪应用商品计数增减功能实现咨询

嘿，我看你正在搭建一款Angular 5利润追踪应用，针对巧克力和葡萄酒的销量计数已经有了初步的实现逻辑，我帮你把内容规整成清晰的格式，再补充点实用建议：

功能需求 #

• 卖出Chocolate时，点击对应+按钮增加计数，点击-按钮减少计数
• 卖出Wine时，操作对应输入框旁的±按钮实现计数增减
• 已实现incrementchoc()（巧克力计数递增）、incrementwine()（葡萄酒计数递增），以及对应的递减函数decrementchoc()、decrementwine()

现有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}}" >
  </div>
</div>

小优化建议 #

• 去掉冗余的value绑定：输入框里的value="{{info.choco}}"可以删掉，因为[(ngModel)]已经完成了双向数据绑定，重复设置value会导致潜在的冲突
• 封装通用增减函数：可以把重复的增减逻辑抽成一个通用函数，避免写多个类似的incrementchoc()、decrementwine()，比如：

  updateCount(item: 'choco' | 'wine', direction: 'plus' | 'minus') {
    if (direction === 'plus') {
      this.info[item]++;
    } else {
      this.info[item] = Math.max(0, this.info[item] - 1); // 防止计数变成负数
    }
  }
  

  然后HTML里的按钮点击事件改成(click)="updateCount('choco', 'plus')"和(click)="updateCount('choco', 'minus')"，这样后续新增商品时不用再写新的增减函数
• 输入值校验：可以给input加上类型限制（比如type="number"），或者在keyup事件里做数值校验，避免用户输入非数字内容

内容的提问来源于stack exchange，提问作者node_man