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

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

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

还是有其他方法可以做到这一点

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

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

基础 {{basePay}} 可变激励 {{基本工资*BonuPercent} 目标现金总额TTC本地 {{基本工资+基本工资*BonuPercent} 第1排+第2排+第3排 在typescript中有什么方法可以做到这一点吗

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

这里有一个例子，但请记住，你没有说明你期望的总数是多少或它们来自哪里。您实际上没有对年份值或索引做任何操作

作为旁注，您可以使用html，而不是创建空的或重复的列。这是关于第一行的

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]);
  }
}

基础 {{basePay}} 可变激励 {{激励}} 目标现金总额TTC本地 {{ttc}} 总和 {{total}}

---

对不起，你误解了这个问题。我正在尝试计算html表列的总和。问题已经更新，希望有意义now@NareshShetty-答案不变。您可以在组件中而不是在HTML模板中进行计算。其中一个原因是，*ngFor可以在每次变化检测时重新执行，这可能导致副作用或额外开销。