Angular租金计算器循环仅重复打印首次迭代值问题求助

问题描述 #

开发租金计算器应用，包含总租金、年租金涨幅、计算年限三个输入字段，但点击计算后，代码仅重复打印首次迭代的结果，无法输出逐年增长的租金值。

原HTML代码 #

<input type="number" name="rent" placeholder="Enter your total rent" [(ngModel)]="rent" />

<input type="number" placeholder="Rent increase per Year" [(ngModel)]="increase">

<input type="number" placeholder="Number of Total Years" [(ngModel)]="months">

<button type="button" (click)="calculate()"> Calculate </button>
<br>

<h4 *ngFor="let r of total;let i=index">
    Year {{i+1}}&nbsp; &nbsp;=&nbsp;&nbsp;{{r}}&nbsp;Rs
</h4>

原TypeScript代码 #

export class RentCalculatorComponent {

  constructor() { }

  increase!: number;

  months!: number;

  rent!: number;

  new!: number;

  total: any[] = [];//declare an array

  calculate() {

    for (let i = 0; i <= this.months - 1; i++) {
     
      this.new = this.rent + this.rent * this.increase / 100;

      this.total[i] = this.new.toFixed(2);; //here store in the array the result

      console.log(this.total[i]);

    }
  }
}

问题原因 #

循环中始终使用初始的this.rent计算涨幅，没有逐年更新租金基数，导致每一年的计算结果都是第一年的涨幅值，所以所有年份输出相同结果。另外，多次点击计算时total数组会保留之前的数据，可能导致输出混乱。

修复后的TypeScript代码 #

export class RentCalculatorComponent {

  constructor() { }

  increase!: number;
  // 变量名优化：months改为years，贴合实际含义
  years!: number;
  rent!: number;
  total: string[] = [];

  calculate() {
    // 每次计算前清空数组，避免旧数据残留
    this.total = [];
    // 用临时变量保存当前年份的租金，初始值为输入的租金
    let currentRent = this.rent;

    for (let i = 0; i < this.years; i++) {
      // 将当前租金存入数组
      this.total.push(currentRent.toFixed(2));
      // 计算下一年的租金，基于当前租金更新
      currentRent = currentRent + currentRent * this.increase / 100;
    }
  }
}

对应HTML调整（可选优化） #

把months改为years，保持变量名一致：

<input type="number" placeholder="Number of Total Years" [(ngModel)]="years">

说明 #

1. 新增currentRent临时变量，逐年更新租金基数，确保每一年的涨幅都基于上一年的结果计算
2. 每次计算前重置total数组，避免多次点击后数据累加
3. 优化变量名months为years，提升代码可读性
4. 调整循环逻辑，先存入当前年份租金，再计算下一年的租金，确保第一年显示初始租金（若需要第一年就显示涨幅后的值，可调换存入与计算的顺序）

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