Angular中数组对象score字段求和求平均时overallScore始终为0问题

问题原因 #

• 异步执行顺序错误：getRecipesScoresForRecipe 是异步请求方法，发送请求后不会等待返回就会继续执行后续代码。你原逻辑中在 ngOnInit 里同步调用 getRating 和 sumRatingValues，执行计算时接口还没返回数据，userScores 还是空数组，forEach 循环完全不会执行，因此没有控制台打印、overallScore 始终为初始值0。等接口返回赋值 userScores 后，计算逻辑已经执行完毕，不会自动重新触发。
• 计算逻辑存在错误：原 sumRatingValues 方法的最后一行 this.overallScore / i 仅做了除法运算，没有将计算结果赋值回 overallScore，就算循环正常执行也无法得到正确的平均值；同时没有处理数组为空的边界情况，会出现除以0得到NaN的问题。

修复方案 #

1. 调整计算逻辑的触发时机 #

在 getRating 的接口返回回调中，赋值完 userScores 后再调用计算方法，确保计算时已经拿到完整数据：

getRating(){
    this.route.params
    .subscribe((params: Params) => {
      const id = params['id'];
      this.sharedService.getRecipesScoresForRecipe(id).subscribe(scores =>{
        this.userScores = scores;
        console.log(this.userScores);
        // 新增：拿到数据后再计算平均分
        this.sumRatingValues();
      })
  });
}

2. 修正平均值计算逻辑 #

优化计算逻辑，增加边界处理，正确赋值计算结果：

sumRatingValues(): void{
  let total = 0;
  const count = this.userScores.length;
  // 空数组直接返回0，避免除以0错误
  if (count === 0) {
    this.overallScore = 0;
    return;
  }
  this.userScores.forEach(scoreItem => {
    total += scoreItem.score;
    console.log('累加分数：', total);
  });
  // 把平均值赋值给overallScore
  this.overallScore = total / count;
}

3. 调整ngOnInit逻辑 #

移除原 ngOnInit 中同步调用的 sumRatingValues，避免无意义的空计算：

ngOnInit(): void {
    ...
    this.getRating();
    // 删除原来的this.sumRatingValues()调用
}

可选优化 #

可以把 userScores 的类型从 any[] 调整为明确的类型，提升类型安全性：

// 定义UserScore类型
interface UserScore {
  score: number;
  // 其他字段按需补充
}
// 修改属性定义
public userScores: UserScore[] = [];
public overallScore : number = 0;

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