Angular 5中如何获取数值递增后的总和？

嘿，作为Angular 5新手遇到这种问题太正常了！我来帮你捋清楚怎么搞定数值递增总和的事儿，顺便给你调整下*ngFor的用法～

首先得明确：*ngFor是用来循环渲染列表项的，如果你要计算所有项的总和，或者遍历过程中显示累加值，不能把计算逻辑混在循环渲染里，得分开处理。

方案1：计算所有项的总总和（最常用） #

直接在组件类里写一个计算总和的逻辑，模板里直接调用就行，性能也更好：

组件代码（.ts文件）

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  // 假设你的items是带数值属性的数组，比如每个item有value字段
  items = [
    { value: 10, name: 'Item 1' },
    { value: 20, name: 'Item 2' },
    { value: 30, name: 'Item 3' }
  ];

  // 用getter计算总和，Angular会自动帮你更新
  get totalSum(): number {
    // reduce累加，加||0避免数值为undefined时出现NaN
    return this.items.reduce((sum, item) => sum + (item.value || 0), 0);
  }
}

模板代码（.html文件）

把总和放在*ngFor循环外面的底部，不要跟着循环重复渲染：

<div class="card">
  <!-- 循环渲染每个item -->
  <div *ngFor="let item of items" class="p-2">
    <i class="fa fa-circle green-text" aria-hidden="true" mdbTooltip="Active Item" placement="bottom"></i>
    <small class="text-muted">{{ item.name }}</small>
    <span class="ml-2">数值：{{ item.value }}</span>
  </div>

  <!-- 底部显示总和 -->
  <div class="card-footer clearfix">
    <div class="float-left p-2">
      <strong>总总和：{{ totalSum }}</strong>
    </div>
  </div>
</div>

方案2：遍历过程中显示累加值（到当前项的总和） #

如果你的需求是每一行都显示“到当前项为止的递增总和”，可以提前在组件里预处理数据：

组件代码

ngOnInit() {
  let runningTotal = 0;
  // 给每个item添加一个runningTotal字段，存累加值
  this.items = this.items.map(item => {
    runningTotal += item.value;
    return { ...item, runningTotal };
  });
}

模板代码

循环的时候直接显示每个item的累加值：

<div *ngFor="let item of items" class="p-2">
  <i class="fa fa-circle green-text" aria-hidden="true" mdbTooltip="Active Item" placement="bottom"></i>
  <small class="text-muted">{{ item.name }}</small>
  <span class="ml-2">数值：{{ item.value }}</span>
  <span class="ml-3">累计总和：{{ item.runningTotal }}</span>
</div>

小提醒 #

• 别在模板里直接写{{ items.reduce(...) }}这种复杂计算，Angular的变更检测会频繁执行这段代码，拖慢性能，放在组件的getter或者预处理里更靠谱。
• 确保你的items里的数值字段存在，计算时加||0能避免出现NaN的情况。

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