angular - 从对象数组中显示“实时”数量总和的最佳方式

Question

下面是我拥有的数组。我正在构建一个离子/角度应用程序，并希望在屏幕上显示 Total，这将是下面对象数组中 Quanties 的总和。

这个数组可以添加对象，数量也可以增加/减少......但我希望这个总数能够反映这些变化。解决这个问题的最佳方法是什么？

标签： angulartypescript

Answer 1

这一行应该做

let sum = LotsForCheckIn.map(lot => lot.Quantity).reduce((prev, curr) => prev + curr, 0);

更新：

我在这里假设您LotsForCheckIn在某处的组件中有一个作为类属性。

组件html：

<div>
Total {{sum()}}
</div>

组件 ts：

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"]
})
export class AppComponent {
  LotsForCheckIn = [];

  sum(){
    this.LotsForCheckIn
      .map(lot => lot.Quantity)
      .reduce((prev, curr) => prev + curr, 0);
  }
}

现在，对列表的任何更改都将反映在 UI 中，而无需任何额外的代码。