在 angular 中單擊按鈕后將表格數據移動到表格中的下一行

Question

我有兩個表，完全是Table1和table2 。 表1 填充了來自服務的數據。 在表1 中，我有諸如數量、價格和復選框之類的列。 在復選框列中，我將復選框作為值。 數量和價格有數字作為值在表 2 中，我有名為數量和價格的列。

現在說如果我單擊table1中第 1,2 行中的復選框。 因此，如果您取table1中的Qty列，則將添加第 1,2 行中的所有Qty值，並在table2的 qty 列中顯示為單個值。 價格列也是如此。 （示例 6,4 是第 1,2 行中 qty 列的值，因此 add(6+4) 並在table2中qty列的第一行顯示總計。選中時表 1：

點擊gettotal按鈕后

我還刪除了我已經在table1中選擇或啟用的特定復選框的行，並在第一行的table2中進行了總結。 所有這些功能都在單擊按鈕后發生。 因此，在單擊按鈕后，在table2中形成了一個新行，並且已在table1中刪除了啟用的復選框。

現在發生的情況是，下一次如果我在table1上啟用下一組復選框，然后再次單擊按鈕，而不是形成新行，值會在table2的第一行被覆蓋。 我希望將table1中的下一組總計添加為下一行（在table1中），而不是覆蓋或替換table2第一行中的值

下一組復選框

表 2 被覆蓋

注意：此代碼是在 stackoverflow 用戶 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() {
    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>

這段代碼應該會有所幫助。