Angular环境下如何计算ngFor渲染的表格数量列总和

问题原因 #

• 你使用的filter是数组过滤方法，返回值为符合条件的元素组成的新数组，非数值类型，数组直接做乘法运算自然返回NaN
• 你的需求是累加单列所有数量值，原代码中多数组相乘的逻辑和需求不符

最简实现方案 #

因为你的表格是通过遍历rows数组渲染的，直接对rows中的quantity字段做累加即可，推荐使用数组reduce方法实现：

TS 代码 #

// 定义总和变量，初始值设为0避免空值报错
totalQty: number = 0;

ngOnInit() {
  // 注意：如果rows是异步接口返回的数据，要在接口拿到结果后再调用计算方法
  this.calcTotalQuantity();
}

calcTotalQuantity() {
  this.totalQty = this.rows.reduce((sum, row) => {
    // 兼容非数值、undefined等异常情况，避免累加后得到NaN
    return sum + (Number(row.quantity) || 0);
  }, 0);
}

如果你的rows会动态新增、删除、修改行数据，想实时更新总和，可以直接用getter属性，不用手动调用计算方法：

get totalQty(): number {
  return this.rows.reduce((sum, row) => sum + (Number(row.quantity) || 0), 0);
}

HTML 代码 #

你现有HTML代码无需修改，直接使用{{totalQty}}渲染总和即可。

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