如何计算角度 9 中列的总价？

Question

我要计算每列的总价、总数量和总计数(#)。

|项目 |价格 |数量 |

1 |鼠标 | 500 | 1 | 2 |线材 | 100 | 2 | TI:3 | |目标价:600 | TQ:3 |

我的 Js 无法获得所需的输出？帮我搞定

HTML

     <table class="table table-hover" *ngIf="secondTableData.length" id="sum_table">
        <thead>
         <tr class="table-primary" class="titlerow">
            <td>#</td>
            <td>Item</td>
            <td>Quantity</td>
            <td>Price</td>
            <td>Action</td>
        </tr>
      </thead>
     <tbody>
        <tr *ngFor="let newdata of secondTableData let i=index;">
            <td class="netSn">{{i+1}}</td>
            <td>{{ newdata.itemName }}</td>
            <td class="netQt">{{ newdata.Quantity }}</td>
            <td class="netSum">{{ newdata.retailRate }}</td>
            
        </tr>
        <tr class="totalColumn">
            <td class="totalCol">TI:</td>  <!--I want to Diaplay Total counted #  -->
            <td></td>
            <td class="totalCol">TQ:</td>  <!--I want to Display Total Quantity  -->
            <td class="totalCol">TP:</td>  <!--I want to  Display Total Price  -->
            
        </tr>
      </tbody>
    </table>

Js：

    $(document).ready(function () {

        var $dataRows = $("#sum_table tr:not('.totalColumn, .titlerow')");

        $dataRows.each(function () {
            $(this).find('.netSn').each(function (i) {
                totals[i] += parseInt($(this).html());
            });

            $(this).find('.netQt').each(function (i) {
                totals[i] += parseInt($(this).html());
            });

            $(this).find('.netSum').each(function (i) {
                totals[i] += parseInt($(this).html());
            });
        });
        $("#sum_table td.totalCol").each(function (i) {
            $(this).html("" + totals[i]);
        });

    });

Component.ts：

    //To Copy data of First table to Second table after clicking first table
  secondTableData = [];
  updateSecondTable(data) {
    let foundItem = this.secondTableData.find((item) => item.itemName === data.itemName);
    if (foundItem) {
      foundItem.Quantity += 1;
      foundItem.retailRate += data.retailRate;
      return;
    }
    this.secondTableData.push({
      itemName: data.itemName,
      Quantity: 1,
      retailRate: data.retailRate,
    })
  }

Answer 1

你可以像下面这样尝试

工作stackblitz

模板文件

<tbody>
  <tr *ngFor="let newdata of secondTableData">
    <td>{{ newdata.Index }}</td>
    <td>{{ newdata.Item }}</td>
    <td>{{ newdata.Quantity }}</td>
    <td>{{ newdata.Price }}</td>
  </tr>
  <tr>
    <td>TI : {{ secondTableData.length }}</td>
    <td></td>
    <td>TQ : {{ totalQuantity }}</td>
    <td>TP : {{ totalPrice }}</td>
  </tr>
</tbody>

打字稿文件

export class AppComponent {
  totalQuantity = 0; <-- A variable to hold quantity total
  totalPrice = 0; <-- A variable to hold price total

  updateSecondTable(data) {
    let foundItem = this.secondTableData.find((item) => item.Item === data.Item);
    if (foundItem) {
      foundItem.Quantity += 1;
      foundItem.Price += data.Price;
      this.getColumnTotal(); // <-- A call here
      return;
    }
    this.secondTableData.push({
      Index: this.secondTableData.length + 1,
      Item: data.Item,
      Quantity: 1,
      Price: data.Price,
    })
    this.getColumnTotal(); // <-- A call here
  }

  // Here is the logic
  getColumnTotal() {
    const { Quantity, Price } = this.secondTableData.reduce((acc, item) => {
      acc.Quantity += item.Quantity;
      acc.Price += item.Price;
      return acc;
    }, {
      Quantity: 0,
      Price: 0
    });
    this.totalQuantity = Quantity;
    this.totalPrice = Price;
  }
}