如何在Angular表格中实现数值求和？

我想要对表格中的这些数值进行求和：

我需要创建filter还是使用ngFor？我知道当前的计算逻辑不合理。

HTML代码 #

<th>
  <i>Sum:{{ this.invoices?.sum | number }}</i>
</th>

TS代码 #

invoices: any;

calcSum = ( invoice: any, sum:number): string => {
      if (!invoice||!sum) { 
          return '0';
      }
      return (this.invoices.sum + this.invoices.sum); 
      
  }

接口定义 #

export interface InvoiceResponse{
    paid: boolean,
    paidAmount: number,
    client: string,
    number: number,
    total:number,
    taxTotal: number,
    sum: number,
    currencyRate: string,
    currencyRateAtIssueDate: string,
    issuedAtPlace: string,
    issuedAt: string,
    deadlineAt: string
}

不需要用filter或者ngFor来做求和，直接在TS里计算总和更简单高效：

1. 修正求和逻辑
   你的calcSum函数逻辑错误，没有遍历发票列表累加数值。假设invoices是InvoiceResponse类型的数组，正确的求和方式是用reduce遍历累加目标字段（比如total，根据你表格里的数值替换成对应字段）：

// 计算总和的方法
getTotalSum(): number {
  if (!this.invoices || this.invoices.length === 0) {
    return 0;
  }
  // 这里累加total字段，按需换成paidAmount或其他数值字段
  return this.invoices.reduce((accumulator, invoice) => accumulator + invoice.total, 0);
}

2. 模板中调用求和方法
   在HTML模板里直接调用这个方法，不需要依赖接口里的sum字段：

<th>
  <i>Sum:{{ getTotalSum() | number }}</i>
</th>

3. 性能优化（可选）
   如果发票列表会频繁更新，建议把计算结果缓存，避免每次渲染都重复计算：

private _totalSum = 0;
// 用getter获取缓存的总和
get totalSum(): number {
  return this._totalSum;
}

// 当发票数据更新时重新计算总和
updateInvoices(invoices: InvoiceResponse[]) {
  this.invoices = invoices;
  this._totalSum = invoices.reduce((acc, inv) => acc + inv.total, 0);
}

模板里直接使用缓存值：

<th>
  <i>Sum:{{ totalSum | number }}</i>
</th>

内容的提问来源于stack exchange，提问作者Future Hacker