Angular购物车商品数量计数器索引值显示异常修复方法

计数串值的核心原因有两个：

• 你用了全局共享的this._value变量作为计数计算的中转，所有商品的加减操作都会修改这个全局值，操作第二个商品时会直接读取第一个商品操作后残留的全局值，自然会出现数值沿用的问题
• 没有给searchedDataResult里的每个商品项初始化独立的_value属性，没有做到每个商品计数单独存储

TS代码调整 #

1. 首先在给searchedDataResult赋值（一般是接口请求拿到搜索结果后），遍历所有商品项，给每个项添加独立的_value属性，初始值固定为1，示例代码：

// 搜索结果赋值逻辑处修改
this.xxxService.getSearchResult(params).subscribe(res => {
  this.searchedDataResult = res.map(item => ({
    ...item,
    _value: 1 // 每个商品独立维护自己的计数，初始值1
  }))
})

2. 重写incrementValue方法，删掉全局this._value相关逻辑，直接操作当前索引对应商品的自有_value属性：

incrementValue(step: number = 1, index: number): void {
  this.searchedDataResult[index]._value += step;
}

3. 配套的禁用按钮方法直接使用传入的当前商品计数值判断即可，不要依赖全局变量，示例：

// 减号按钮禁用逻辑：计数到1就不能再减
shouldDisableDecrement(currentVal: number): boolean {
  return currentVal <= 1;
}
// 加号按钮禁用逻辑：可自行设置库存上限，示例设为最大99
shouldDisableIncrement(currentVal: number): boolean {
  return currentVal >= 99;
}

HTML模板调整 #

原模板中input的value用字符串插值绑定是单向的，用户手动修改输入框内容时不会同步到对应商品的_value属性，改成属性绑定即可，其余逻辑不需要改动，调整后模板代码：

<mat-card class="example-card"  *ngFor="let searched of searchedDataResult;let indexOfelement=index;">
  <div class="col-2">
    <mat-form-field>
      <button
        mat-button
        mat-icon-button
        matPrefix
        aria-label="Remove"
        [color]="getColor()"
        (click)="incrementValue(-1, indexOfelement)"
        [disabled]="shouldDisableDecrement(searched._value)"
      >
        <mat-icon>remove</mat-icon>
      </button>
      <input 
        matInput 
        type="number"
        id="getval_{{indexOfelement}}"
        [value]="searched._value"
        (focus)="setColor('primary')"
        (blur)="setColor('default')"
      />
      <button
        mat-button
        mat-icon-button
        matSuffix
        aria-label="Add"
        [color]="getColor()"
        (click)="incrementValue(1, indexOfelement)"
        [disabled]="shouldDisableIncrement(searched._value)"
      >
        <mat-icon>add</mat-icon>
      </button>
    </mat-form-field>
    <button mat-flat-button style="background-color: #1d857b;color:white" (click)="getaddedmedcine(searched.id, indexOfelement, searched.amount)">
      Add To Cart
    </button>
  </div>
</mat-card>

修改后每个商品的计数独立存储在自身的_value属性中，互不干扰，所有商品初始计数值默认为1，加减操作只会修改当前操作商品的数值，不会再出现串值问题。

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