Angular实现点击Add按钮累加对应价格更新总计金额

1. 组件类(TS)修改 #

首先在组件中新增总金额变量，以及按钮点击的价格累加方法：

export class BookingComponent implements OnInit {
  bookAdd: Booking[] = [];
  // 新增总金额变量，初始值为0
  totalAmount: number = 0;

  constructor(private booking: BookingService, private CartService: CartService) { }

  ngOnInit(): void {
    this.booking.getBooking().subscribe((data) => {
      this.bookAdd = data;
    });
  }

  // 新增：点击Add按钮触发的累加方法
  addPrice(currentTierPrice: number): void {
    // 累加对应档位的价格到总金额
    this.totalAmount += currentTierPrice;
    // 如需同步到购物车服务，可在此处调用CartService相关方法
    // this.CartService.addItem(currentTierPrice);
  }
}

2. 模板(HTML)修改 #

2.1 给Add按钮绑定点击事件 #

在价格列循环的Add按钮上，绑定click事件，传入当前档位的价格作为参数：

<td *ngFor="let pointer of item.price; index as i" >{{pointer}}
  <!-- 绑定点击事件，传入当前档位价格pointer -->
  <button type="button" class="btn btn-dark btn-sm" (click)="addPrice(pointer)">Add</button>
</td>

2.2 底部总计行绑定总金额显示 #

把表格底部总计位置的静态文本替换为动态绑定的总金额，可按需加货币格式化管道：

<tr>
  <th scope="row">3</th>
  <td colspan="3"></td>
  <td>
    <p>
      total: {{ totalAmount | currency }}
    </p>
  </td>
</tr>

可选扩展（对应Summary列需求） #

如果需要在每行的Summary列显示当前行已选的价格合计，可以给每个item扩展一个行合计属性，点击时同时累加行合计即可：

• 给Booking接口扩展rowTotal: number = 0属性
• 修改Add按钮点击传参：(click)="addPrice(pointer, item)"
• 调整addPrice方法逻辑，同时累加当前item的rowTotal和全局totalAmount
• 在每行Summary列渲染{{item.rowTotal}}即可

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