Angular项目中多次变更检测导致总金额计算错误如何防范？

问题根因 #

你遇到的总金额重复累加问题，核心原因是在模板绑定的方法中修改了全局状态：

• Angular默认的变更检测机制会在每一次异步事件（点击、HTTP请求、定时器等）触发后，重新渲染模板中所有绑定的表达式、方法
• 你模板中调用的product.details()方法内部调用了grandTotal，而grandTotal每次执行都会给全局的allTotal累加数值，变更检测触发多少次，就会累加多少次，自然就出现了计算错误。

修复方案 #

最稳妥的修改方式是将总金额改为实时计算的属性，去掉累加逻辑，从根源上避免重复计算的问题：

1. 修改TS代码 #

import { Component, OnInit } from "@angular/core";

interface PropsData {
  productName: string;
  value: number;
  count: number;
  details: (value1: number, value2: number) => number;
}

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
  products: PropsData[];
  // 改为getter计算属性，每次获取时实时统计所有商品总和
  get allTotal(): number {
    return this.products.reduce((total, product) => {
      return total + product.value * product.count;
    }, 0);
  }

  ngOnInit() {
    this.products = [
      {
        productName: "sugar",
        value: 20,
        count: 1,
        details: (value1, value2) => {
          return value1 * value2;
        }
      },
      {
        productName: "salt",
        value: 40,
        count: 1,
        details: (value1, value2) => {
          return value1 * value2;
        }
      },
      {
        productName: "jackery",
        value: 70,
        count: 1,
        details: (value1, value2) => {
          return value1 * value2;
        }
      }
    ];
  }

  updateCount(product: PropsData) {
    product.count++;
  }

  grandTotal(value1, value2): number {
    return value1 * value2;
  }
}

2. 模板代码无需改动 #

原来的HTML代码可以直接复用，不需要修改任何绑定逻辑。

额外优化建议 #

• 模板中绑定的方法应该保持纯函数特性：相同输入永远返回相同输出，不修改任何外部状态，避免出现意料之外的副作用。
• 如果列表数据量大、计算总金额性能消耗高，可以在商品count修改的时机（也就是updateCount方法执行时）一次性计算总金额并缓存，不需要每次获取都重新计算。

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