Angular 7中如何在*ngFor循环中累加计算总费用并初始化变量

嘿，我太懂这种明明觉得是个简单需求却找不到正确路子的烦躁了！在Angular（2+）里直接在模板循环里做累加确实和AngularJS的玩法不一样，而且直接用ngInit或者模板里的赋值操作会踩坑——因为Angular的模板语法有严格的限制，更提倡逻辑和视图分离。

给你两个靠谱的解决方案，优先推荐第一个：

1. 在组件类里计算总和（最佳实践） #

把累加逻辑放在组件的TypeScript代码里，模板只负责展示结果，这完全符合Angular的设计原则，还能自动响应数据变化。

示例代码：

组件类（.ts文件）

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

@Component({
  selector: 'app-cost-calculator',
  templateUrl: './cost-calculator.component.html'
})
export class CostCalculatorComponent {
  items = [/* 你的数据数组，比如 { cost: 50 }, { cost: 30 } */];

  // 用getter属性自动计算总和
  get totalCost(): number {
    // 先判断数组是否存在，避免空指针
    if (!this.items || this.items.length === 0) return 0;
    // 使用reduce方法累加每个item的cost
    return this.items.reduce((total, item) => total + item.cost, 0);
  }
}

模板文件（.html）

<!-- 循环展示每个item的cost -->
<div *ngFor="let item of items">
  <div>{{ item.cost }}</div>
</div>

<!-- 直接展示计算好的总和 -->
<div>总费用：{{ totalCost }}</div>

这个方法的好处：

• 只要items数组里的内容变化（比如新增item、修改某个item的cost），totalCost会自动重新计算并更新视图
• 逻辑集中在组件里，便于维护和测试
• 避免模板里的复杂逻辑，让视图更简洁

2. 非要在模板里处理？（不推荐，但满足需求） #

如果确实想在模板里完成累加，Angular允许通过ng-container结合模板变量实现，但这种方式不够优雅，而且不利于维护：

<!-- 初始化totalCost为0 -->
<div *ngIf="(totalCost = 0) || true"></div>

<ng-container *ngFor="let item of items">
  <div>{{ item.cost }}</div>
  <!-- 利用每次循环更新总和，|| true是为了避免ngIf因0值不执行 -->
  <ng-container *ngIf="(totalCost = totalCost + item.cost) || true"></ng-container>
</ng-container>

<div>总费用：{{ totalCost }}</div>

不过真的不建议这么做——模板里的逻辑会让代码变得混乱，而且变更检测的行为可能导致意外的重复计算。

为什么之前的AngularJS方法没用？ #

Angular（2+）和AngularJS是完全重构的框架，模板语法的限制、组件架构都不一样。AngularJS里允许在ng-init和ng-repeat里直接操作变量，但Angular为了保持组件的独立性和可预测性，严格限制了模板对组件变量的直接修改操作，所以老方法自然行不通啦。

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