Question

我有一个表格，其中使用ngFor属性打印每一行。我想计算每列的总和。

在jQuery中，我们可以计算具有相同类的一组HTML元素的总和。有没有办法在Typescript中做到这一点？

或者还有其他方法可以做到吗？

export class Sum implements OnInit {
  basePay: number;
  bonusPercent: number;

  ngOnInit() {
    this.basePay = 10000;
    this.bonusPercent = 0.12;
  }
}

<table>
  <tr>
    <td>Base</td>
    <td *ngFor="let year of [0,1,2,3,4]">{{ basePay }}</td>
  </tr>
  <tr>
    <td>Variable incentive</td>
    <td *ngFor="let year of [0,1,2,3,4]">{{ basePay * bonusPercent }}</td>
  </tr>
  <tr>
    <td>Total Target Cash (TTC) (Local)</td>
    <td *ngFor="let year of [0,1,2,3,4]">{{ basePay + (basePay * bonusPercent )}}</td>
  </tr>
 <tr><td>Sum</td><td>row 1 + row 2+ row 3</td><td></td><td></td><td></td></tr>

</table>

Answer 1

有没有办法在打字稿中做到这一点？

直接在*ngFor中

是，但不是。在ngOnInit函数中创建最终的对象图，然后使用模板和*ngFor显示值。

这里是一个示例，但请记住，您没有说明期望的总金额或来源。您实际上并没有对年份值或指数做任何事情。

作为旁注，您可以使用html column span而不是创建空列或重复列。这是参考第一行。

export class Sum implements OnInit {
  basePay: number;
  bonusPercent: number;
  data: {incentives: number[], ttc: number[], totals?: number[]};

  ngOnInit() {
    this.basePay = 10000;
    this.bonusPercent = 0.12;
    const years = [0,1,2,3,4];

    data = {
      incentives: years.map(_=> basePay * bonusPercent),
      ttc: years.map(_ => basePay + (basePay * bonusPercent)),
    };
    data.totals = years.map((_,i) => data.incentives[i] + data.ttc[i]);
  }
}

<table>
  <tr>
    <td>Base</td>
    <td colspan="5"> {{basePay}} </td>
  </tr>
  <tr>
    <td>Variable incentive</td>
    <td *ngFor="let incentive of data.incentives">{{ incentive }} 
    </td>
  </tr>
  <tr>
    <td>Total Target Cash (TTC) (Local) </td>
    <td *ngFor="let ttc of data.ttc">{{ ttc }} 
  </tr>
  <tr>
    <td>Sum</td>
    <td *ngFor="let total of data.totals">{{ total }} 
  </tr>
</table>

计算Typescript中HTML表的每一列的总和

1 个答案: