Angular房租计算器for循环首索引未显示初始租金问题求助

问题出在你的calculate()方法逻辑上：当前循环的第一次迭代直接计算了涨幅后的租金并存入数组，导致Year 1显示的是涨过价的数值，而非初始租金。

修改后的TS代码 #

export class RentCalculatorComponent {
  constructor() { }

  increase: number = 0;
  years: number = 0;
  rent: number = 0;
  total: number[] = [];
  nextYearCalculatedRent: number = 0;

  calculate() {
    // 每次计算前清空数组，避免重复计算叠加数据
    this.total = [];
    // 重置计算缓存，防止上次计算结果干扰
    this.nextYearCalculatedRent = 0;

    // 先存入初始租金作为第一年的数值
    this.total.push(Math.round((this.rent + Number.EPSILON) * 100) / 100);
    
    // 从第二年开始计算涨幅，循环次数为years-1次
    for (let i = 1; i < this.years; i++) {
      // 用上一年的租金（数组最后一项）计算当年涨幅后的值
      const previousRent = this.total[i - 1];
      this.nextYearCalculatedRent = previousRent + (previousRent * this.increase / 100);
      this.total.push(Math.round((this.nextYearCalculatedRent + Number.EPSILON) * 100) / 100);
    }
  }
}

关键修改点说明 #

• 每次计算前清空total数组，避免多次点击Calculate按钮后数组数据叠加
• 首先将初始租金直接存入数组的第一个位置，对应Year 1的显示
• 循环从第2年（索引1）开始，基于数组中前一年的租金计算当年涨幅后的值，确保每一年的数值逻辑正确
• 重置nextYearCalculatedRent变量，防止上次计算的残留值影响新的计算
• 给变量添加明确的类型声明（number），提升代码可读性和类型安全性

HTML代码无需修改 #

你的HTML部分逻辑是正确的，*ngFor会按数组顺序依次显示每一年的租金，修改TS逻辑后即可正常显示初始租金。

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