Angular 计算任务积分总和时total返回undefined问题

• 最直接的报错根源：sumPoint方法内部定义的total是函数局部作用域变量，方法执行结束后就会被销毁，根本不会挂载到组件实例上。你模板里写的{{total}}读取的是组件类的成员属性，当前这个属性没有任何定义和赋值，自然会返回undefined。
• 隐藏的逻辑坑：如果tasksToSave数组里的任务项不存在point字段，或是point的值不是数字类型，直接做加法运算会得到NaN，就算把变量绑定正确了也无法显示正常的求和结果。
• 遗漏的触发逻辑：当前代码没有任何调用sumPoint方法的时机，就算变量绑定逻辑对了，求和计算也不会主动执行更新总值。

1. 把total调整为组件类的公共成员，删除原方法内的局部total声明
2. 累加逻辑增加值合法性校验，过滤无效值
3. 在tasksToSave数组发生变动的节点（新增任务、删除任务、接口加载任务完成后）主动调用sumPoint更新总值

修正后的TS参考代码：

// 定义组件级的total成员，模板可直接访问
total: number = 0;

saveTasks() {
  if (this.tasksToSave.length != 0) {
    for (let i = 0; this.tasksToSave.length > i; i++) {
      this.ticketService.setAddTasks(
        this.id,
        this.tasksToSave[i]
      )
    }
   }
}

sumPoint() {
  // 每次计算前重置总值
  this.total = 0;
  if (this.tasksToSave.length != 0) {
    for (let i = 0; i < this.tasksToSave.length; i++) {
      // 校验point值，无效值按0计算，避免NaN
      const currentPoint = Number(this.tasksToSave[i].point) || 0;
      this.total += currentPoint;
    }
  }
  // 此处打印可以正常拿到计算后的总值
  console.log('当前任务积分总和：', this.total);
}

你的HTML模板不需要修改，因为total已经是组件的成员属性，模板里的{{total}}可以正常读取到更新后的值。

补充说明：也可以直接在模板中写{{sumPoint()}}绑定方法返回的求和值，但这种写法会在每一次变更检测周期重复执行求和逻辑，任务量较大时会带来不必要的性能损耗，更推荐用类成员存储计算结果。

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