计算启用复选框的行并在另一个表格中显示

Question

我有两个表，完全是 Table1 和 table2。 Table1 填充了来自服务的数据。在 Table1 中，我有 Qty、Price 和 Checkbox 等列。在复选框列中，我将复选框作为值。数量和价格以数字为值 在 table2 我有名为 Qty 和 Price

的列

表1和2的图片

现在假设我点击 table1 中第 1、2、4 行的复选框。因此，如果您采用 table1 中的 Qty 列，则应添加第 1、2、4 行中的所有 Qty 值并显示在 table2 中的 >qty 列作为单个值。 价格列也是如此。 （示例 6,4,2 是第 1,2,4 行中 qty 列的值，因此 add(6+4+2) 并在 qty的第一行显示总计> table2 中的列

我尝试了两天无法找到解决方案。我知道这是一个非常困难的解决方案。 如果可以，请帮助我。

STACKBLITZ：https://stackblitz.com/edit/angular-ivy-coydaf?file=src%2Fapp%2Fapp.component.ts

Answer 1

在组件级别添加一个变量来保存总计数。

totalCount: any;

在ngOnInit事件中初始化它。

this.totalCount = {qty:0,value:0};

在 Checkbox onChange 事件调用下面的函数将根据检查状态添加/减去。

getTotal(event,item) {
    if (event.target.checked) {
      this.totalCount.qty =  this.totalCount.qty + item.qty;
      this.totalCount.value =  this.totalCount.value + item.value;
    } else {
      this.totalCount.qty =  this.totalCount.qty - item.qty;
      this.totalCount.value =  this.totalCount.value - item.value;
    }
}

这样显示值。

<tr *ngIf="!(totalCount.qty == 0 || totalCount.value == 0)">
    <td>1</td>
    <td>{{totalCount.qty}}</td>
    <td>{{totalCount.value}}</td>
</tr>

Working StackBlitz：-

https://stackblitz.com/edit/angular-ivy-349pwn?file=src%2Fapp%2Fapp.component.html