Angular8嵌套数组quantity求和及ngFor绑定异常问题求助

核心原因 #

你在循环计算每个stock-shift的productList总和时，大概率用了同一个全局/共享变量存储结果，Angular的变更检测会让所有绑定该变量的地方同步最后一次赋值的结果。

解决方法 #

方法1：预处理数据，给每个stock-shift新增总和属性 #

在组件初始化或数据获取完成后，遍历stock-shift数组，为每个元素新增totalQuantity字段存储对应productList的求和值：

// 假设你的stockShift数组结构如下
stockShift = [
  { productList: [{ quantity: 2 }, { quantity: 3 }] },
  { productList: [{ quantity: 1 }, { quantity: 4 }] }
];

ngOnInit() {
  this.stockShift.forEach(item => {
    item.totalQuantity = item.productList.reduce((sum, product) => sum + product.quantity, 0);
  });
}

然后在HTML的ngFor循环中直接绑定这个预处理好的字段：

<div *ngFor="let shift of stockShift" class="card">
  <p>总数量: {{ shift.totalQuantity }}</p>
</div>

方法2：模板内直接计算或用管道复用逻辑 #

如果不想修改原数据，可在模板中直接用reduce计算（注意：频繁变更检测场景下性能略差）：

<div *ngFor="let shift of stockShift" class="card">
  <p>总数量: {{ shift.productList.reduce((sum, p) => sum + p.quantity, 0) }}</p>
</div>

若觉得模板代码冗余，可自定义管道复用求和逻辑：

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

@Pipe({ name: 'sumQuantity' })
export class SumQuantityPipe implements PipeTransform {
  transform(productList: Array<{ quantity: number }>): number {
    return productList?.reduce((sum, item) => sum + (item.quantity || 0), 0) || 0;
  }
}

在模块中声明管道后，模板中即可这样使用：

<div *ngFor="let shift of stockShift" class="card">
  <p>总数量: {{ shift.productList | sumQuantity }}</p>
</div>

错误示例（避坑） #

如果之前是以下写法，必然导致所有卡片显示最后一个结果：

// 错误：用单个变量存储所有元素的总和
totalQty = 0;

ngOnInit() {
  this.stockShift.forEach(item => {
    this.totalQty = item.productList.reduce((sum, product) => sum + product.quantity, 0);
  });
}

<!-- 错误：所有卡片绑定同一个变量 -->
<div *ngFor="let shift of stockShift" class="card">
  <p>总数量: {{ totalQty }}</p>
</div>

循环结束后totalQty仅保留最后一个元素的求和结果，所有绑定它的卡片自然会显示同一值。

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