Angular实现表格行点击切换增减数量的问题及解决方案

需求说明 #

当前Angular项目中已实现点击表格行时，将该行的cantidad数值累加到totalCantidad，需要扩展功能：再次点击已选中的行时，从totalCantidad中扣除对应数值。

初始代码 #

初始HTML代码 #

<tbody>
    <tr *ngFor="let item of articulos; index as i" (click)="total(item.cantidad)">
        <td>{{item.articulo}}</td>
        <td>{{item.cantidad}}</td>
        <td>{{item.recogida}}</td>
    </tr>
    <br>
</tbody>

<div type="button" class="col border border-white border-4" id="other" type="button" routerLink="/entry-order-lines-quantity" style="background-color:rgb(3, 71, 150);">Cantidad {{totalCantidad}} 
</div>

初始TS代码 #

export class EntryOrderLinesComponent implements OnInit {

  articulos = [
    {
      articulo: '385/65X22.5 HANKOOK AH51 160K (3003836)',
      cantidad: 94,
      recogida: '0',
    },
    {
      articulo: '385/65X22.5 HANKOOK TH31 164K (3003309)',
      cantidad: 60,
      recogida: '0',
    },
  ];
  
  totalCantidad: number = 0;

  constructor(private datosService: DatosService, private fb: FormBuilder) {}

  total(cantidad: number) {
    this.totalCantidad += cantidad;
  }
}

解决方案 #

核心思路是给每个articulos项添加selected状态标记，点击行时切换该状态，并根据状态对totalCantidad进行增减操作，同时通过样式直观区分选中状态。

修改后的HTML代码 #

<tr *ngFor="let item of articulos; index as i" (click)="selectAndCalculateTotal(item)"
    [ngClass]="{'seleccionada': item.selected, 'noSeleccionada': !item.selected}">
    <td>{{item.articulo}}</td>
    <td>{{item.cantidad}}</td>
    <td>{{item.recogida}}</td>
</tr>

注：需提前定义seleccionada和noSeleccionada样式类，用于区分行的选中/未选中状态。

修改后的TS代码 #

selectAndCalculateTotal(item: any) {
    item.selected = !item.selected;
    this.totalCantidad += item.selected ? item.cantidad : -item.cantidad;
}

实现效果 #

点击表格行时会切换该行的选中状态：

• 首次点击：将该行cantidad值累加到totalCantidad，并应用选中样式
• 再次点击：从totalCantidad中扣除该行cantidad值，恢复未选中样式

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