深入解析Angular中循环计算与数组操作的常见陷阱及优化实践

<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}}   =  {{r}} Rs
</h4>

import { Component } from '@angular/core';

@Component({
  selector: 'app-rent-calculator',
  templateUrl: './rent-calculator.component.html',
  styleUrls: ['./rent-calculator.component.css']
})
export class RentCalculatorComponent {
  increase!: number;
  months!: number;
  rent!: number;
  tempRent!: number; // 避免使用 'new' 作为变量名
  total: any[] = [];

  constructor() { }

  calculate() {
    for (let i = 0; i < this.months; i++) {
      // 错误：每次迭代都基于初始的 this.rent 进行计算
      this.tempRent = this.rent + this.rent * this.increase / 100;
      this.total[i] = this.tempRent.toFixed(2);
      console.log(this.total[i]);
    }
  }
}

import { Component } from '@angular/core';

@Component({
  selector: 'app-rent-calculator',
  templateUrl: './rent-calculator.component.html',
  styleUrls: ['./rent-calculator.component.css']
})
export class RentCalculatorComponent {
  increase: number = 0; // 提供初始值
  months: number = 0;   // 提供初始值
  rent: number = 0;     // 提供初始值
  total: any[] = [];

  constructor() { }

  calculate() {
    this.total = []; // 每次计算前清空数组，避免重复显示旧数据
    let currentYearRent = this.rent; // 初始化当前年份租金为输入的初始租金

    for (let i = 0; i < this.months; i++) {
      // 累加计算：当前年份租金 = 上一年租金 + 上一年租金 * 增长率
      currentYearRent = currentYearRent + (currentYearRent * this.increase / 100);
      this.total.push(currentYearRent.toFixed(2)); // 使用 push() 方法添加元素
    }
  }
}

import { Component } from '@angular/core';

@Component({
  selector: 'app-rent-calculator',
  templateUrl: './rent-calculator.component.html',
  styleUrls: ['./rent-calculator.component.css']
})
export class RentCalculatorComponent {
  // 为组件属性提供初始值，提高健壮性
  rent: number = 0;
  increase: number = 0;
  months: number = 0;

  total: string[] = []; // 明确数组存储的是字符串（toFixed(2) 返回字符串）

  constructor() { }

  /**
   * 计算未来每年的租金。
   * 该方法根据初始租金、年增长率和年数来迭代计算并存储结果。
   */
  calculate(): void {
    // 每次计算前清空结果数组，确保显示最新数据
    this.total = [];

    // 使用一个局部变量来跟踪当前年份的租金，以便进行累加计算
    let currentRentValue = this.rent;

    // 循环计算每年的租金
    for (let i = 0; i < this.months; i++) {
      // 根据上一年的租金计算本年的租金增长
      currentRentValue = currentRentValue + (currentRentValue * this.increase / 100);
      // 将计算结果（保留两位小数）添加到结果数组中
      this.total.push(currentRentValue.toFixed(2));
    }
  }
}