在 angular 中单击按钮后，将 table 数据移动到 table 中的下一行

Question

我总共有两个表 Table1 和 table2。 Table1 填充了来自服务的数据。在 Table1 中，我有 Qty、Price 和 Checkbox 等列。在 checkbox 列中，我将复选框作为值。 qty 和 price 将数字作为值在 table2 中，我有名为 Qty 和 Price 的列。

现在假设我单击 table1 中第 1,2 行的复选框。因此，如果您使用 table1 中的 Qty 列，第 1,2 行中的所有 Qty 值将是添加并显示在 table2 的数量列中作为单个值。 price 列也是如此。（示例 6,4 是第 1,2 行中 qty 列的值，因此添加（6+4）并在 table2qty 列的第一行显示总计 。 表 1 选中时：

点击gettotal按钮后

我还删除了我已经在 table1 中选择或启用的特定复选框的行，并在 table2 中进行了总结在第一行。单击按钮后，所有这些功能都会发生。因此，在按钮单击后，在 table2 中形成了一个新行，并且已在 table1[=75= 中删除了启用的复选框].

现在发生的情况是，如果我在 table1 上启用下一组复选框，然后再次单击按钮， table2 的第一行中的值将被覆盖，而不是形成一个新行。我希望将 table1 中的下一组总计添加为下一行（在 table1 中），而不是覆盖或替换第一行中的值table2
中的行
下一组复选框

表 2 被覆盖

注意：此代码是在 Whosebug 用户 Vimalpatel 的帮助下完成的。我将 stackblitz 中的代码完全归功于他。我已尽力解释。如果我的问题不清楚，请在下方评论

Stackblitz: https://stackblitz.com/edit/angular-ivy-xj8tw4?file=src%2Fapp%2Fapp.component.ts

Answer 1

因此您可以使用 TotalCount 类型的列表，然后使用 *ngFor 遍历列表，就像您对 Table 1 所做的那样.

totalCount: any[] = [];

getTotalCount()

  getTotalCount() {
    let tC = new TotalCount();
    this.listes.map(item => {
      if (item.isChecked) {
        tC.qty = tC.qty + item.qty;
        tC.value = tC.value + item.value;

        this.listes = this.listes.slice(item.isChecked);
      }
    });
    this.totalCount.push(tC);
  }

和 html:

<tbody>
    <tr *ngFor="let totalCount of totalCount; index as j">
        <td>{{j+1}}</td>
        <td>{{totalCount.qty}}</td>
        <td>{{totalCount.value}}</td>
    </tr>
</tbody>

这个 code 应该有所帮助。

在 angular 中单击按钮后，将 table 数据移动到 table 中的下一行

Move table data to next row in table after a button click in angular

html

javascript

typescript

angular

angular5