在Angular项目里处理租金批量计算时，开发者往往会把循环逻辑写在组件方法中，顺手修改外部变量或同一个数组引用。这种做法在单次执行时看似正常，一旦进入多期租金、阶梯计价或优惠叠加场景，就会因为状态未及时隔离、数组被原地修改而产生错账。下面我们直接看一段典型的错误代码，并逐步给出可落地的修复方案。
一、常见的租金循环错误代码
很多账单页会用普通for循环计算每月租金，并且把结果不断push进同一个数组，同时用同一个对象暂存金额。如下面这段代码，它在每次迭代中没有创建新的明细对象，而是复用tempItem，导致最终数组里所有元素都指向同一个引用。
interface RentItem {
month: number;
amount: number;
}
@Component({
selector: 'app-rent',
template: `<div *ngFor="let r of rents">{{ r.month }}月: {{ r.amount }}</div>`
})
export class RentComponent {
rents: RentItem[] = [];
calcWrong(base: number, months: number) {
const tempItem: RentItem = { month: 0, amount: 0 };
for (let i = 1; i <= months; i++) {
tempItem.month = i;
tempItem.amount = base * i; // 假设每月递增
this.rents.push(tempItem); // 错误：每次push的是同一个引用
}
}
}
上面的calcWrong方法执行完后，this.rents里虽然有months个元素，但它们全是同一个tempItem的引用。由于最后一次循环把month和amount改成了最大值，页面上渲染出的每一行都会显示最后一个月的金额，这就是典型的租金计算错误。
另一个容易被忽略的问题是，如果在循环里直接修改了组件的输入属性数组，Angular的变更检测可能感知不到深层变化，尤其当使用的变更策略是OnPush时，视图不会自动刷新，用户看到的数字就停留在上一次状态。
二、使用独立副本与纯函数式数组操作
解决思路是让每一次迭代都拥有独立的数据副本，并且用返回新数组的方式代替原地push。下面给出改进版，利用Array.from或map生成新数组，每期租金都构造新对象，彻底切断引用关联。
interface RentItem {
month: number;
amount: number;
}
@Component({
selector: 'app-rent',
template: `<div *ngFor="let r of rents">{{ r.month }}月: {{ r.amount }}</div>`
})
export class RentComponent {
rents: RentItem[] = [];
calcCorrect(base: number, months: number) {
this.rents = Array.from({ length: months }, (_, idx) => {
const m = idx + 1;
return { month: m, amount: base * m } as RentItem;
});
}
}
在calcCorrect中，每次迭代通过对象字面量返回全新对象，Array.from整体返回新数组并赋值给this.rents。由于引用变了，即使使用OnPush策略，Angular也能识别组件状态已更新并触发视图刷新。这种方式把循环副作用降到最低，也更符合函数式编程的纯数据流转理念。
如果租金规则更复杂，比如包含免租期或折扣，可以把单月计算抽成独立函数，保证它不依赖外部可变状态。这样在单元测试里只需验证该函数输入输出，不必启动整个组件，维护成本明显下降。
三、在模板循环中配合trackBy避免重渲染错乱
当租金数组被重新赋值后，*ngFor默认会销毁并重建所有DOM节点。若数据量大，会影响性能，也可能在动画或表单输入场景下造成状态丢失。使用trackBy能让Angular按标识复用节点，只更新变化项。
@Component({
selector: 'app-rent',
template: `
<div *ngFor="let r of rents; trackBy: trackByMonth">
{{ r.month }}月: {{ r.amount }}
</div>
`
})
export class RentComponent {
rents: RentItem[] = [];
trackByMonth(index: number, item: RentItem) {
return item.month;
}
}
trackByMonth返回以月份为基准的追踪键，当数组因重新计算而被替换时，相同月份的DOM节点会被保留，仅绑定数据刷新。这样即便你在循环中修正了某一期的金额错误，页面也不会整体闪动，用户体验更平稳。
需要注意，trackBy并不能代替正确的数组操作。如果底层仍然复用同一对象引用，trackBy只会让错误的相同引用更快映射到视图上。因此先保证每次迭代产出独立数据，再用trackBy做性能优化，才是完整解法。
四、状态更新时手动触发变更检测的补充做法
在少数跨异步边界的场景，比如租金计算放在Web Worker或第三方回调里，Angular可能来不及自动跑变更检测。此时可注入ChangeDetectorRef或NgZone来显式标记。
import { ChangeDetectorRef } from '@angular/core';
export class RentComponent {
constructor(private cdr: ChangeDetectorRef) {}
calcAsync(base: number, months: number) {
setTimeout(() => {
this.rents = Array.from({ length: months }, (_, i) => ({
month: i + 1,
amount: base * (i + 1)
}));
this.cdr.markForCheck();
}, 100);
}
}
上例在异步计算出新租金数组后调用markForCheck，通知Angular在下一轮检测中核对当前组件。对于OnPush组件，这步尤其关键，否则新数组即使引用不同也不会渲染。结合前面的独立副本原则，就能确保无论是在同步循环还是异步任务里，租金数字都准确且及时呈现。
总结来说，Angular循环中租金计算出错的核心原因，是状态共享与数组原地修改。通过每轮生成新对象、用纯函数返回新数组、配合trackBy和必要的变更检测调用，就能让多期租金逻辑既正确又易维护。