Angular：在嵌套*ngFor指令中实现数值求和

看起来你是想在Angular里处理OrdreMission对象数组，要么展示每个订单的费用明细，要么对每个订单的costs数组求和，但现在遇到了数值拼接而不是求和的问题——大概率是因为数值类型没处理对，或者直接在模板里做了错误的字符串拼接操作。我给你几个针对性的解决方案：

1. 先搞清楚核心问题：为什么会出现数值拼接？ #

如果你的costs数组里的费用值是字符串类型（比如后端接口返回的是字符串格式的数字），直接在模板里做加法就会变成字符串拼接，比如"150" + "200"得到的是"150200"而不是350。所以第一步要确保把字符串转成数字类型。

2. 解决方案一：在组件里写求和方法（最直观） #

先在你的组件类里添加一个计算单个订单总费用的方法：

// 假设你的Cost类（对应你定义的costs[]）有一个amount属性存储费用值
calculateTotalOrderCost(order: OrdreMission): number {
  // 用reduce累加，同时用Number()确保转成数字类型
  return order.costs.reduce((total, cost) => total + Number(cost.amount), 0);
}

然后在模板里这样使用：

<!-- 遍历所有订单 -->
<div *ngFor="let order of ordreMissions">
  <p>订单ID: {{ order.idOrder }}</p>
  <p>总费用: {{ calculateTotalOrderCost(order) }}</p>
  <!-- 如果需要展示费用明细 -->
  <h4>费用明细:</h4>
  <ul>
    <li *ngFor="let cost of order.costs">
      单项费用: {{ cost.amount }}
    </li>
  </ul>
</div>

3. 解决方案二：用自定义管道（复用性更高） #

如果多个地方都需要计算费用总和，写个自定义管道更方便：
首先创建管道文件（比如sum-costs.pipe.ts）：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'sumCosts'
})
export class SumCostsPipe implements PipeTransform {
  transform(costs: any[]): number {
    // 处理空数组的情况，避免报错
    if (!costs || costs.length === 0) return 0;
    // 累加并强制转成数字
    return costs.reduce((total, cost) => total + Number(cost.amount), 0);
  }
}

然后在你的模块里声明这个管道：

import { SumCostsPipe } from './sum-costs.pipe';

@NgModule({
  declarations: [
    // ...其他组件/指令
    SumCostsPipe
  ]
})
export class YourModule { }

最后在模板里直接用管道：

<div *ngFor="let order of ordreMissions">
  <p>订单ID: {{ order.idOrder }}</p>
  <p>总费用: {{ order.costs | sumCosts }}</p>
</div>

4. 关键注意事项 #

• 替换属性名：上面的代码里用的是cost.amount，你要换成costs数组里实际存储费用的属性名（比如cost.value或者cost.total）
• 空值处理：如果costs数组可能为空或者cost.amount可能为null，记得在方法或管道里做判断，避免报错
• 性能优化：如果订单数量很多，模板里直接调用方法可能会因为Angular的变更检测频繁执行，这时候建议在组件初始化时就把每个订单的总费用计算好存起来，比如给OrdreMission加一个totalCost属性，初始化时赋值

内容的提问来源于stack exchange，提问作者Yassine Ben Hamida