angular - Angular 2+使用管道更新模板值

Question

我正在编写购物车的结帐视图，其中array显示了要购买的物品，如下所示：

app.component.html

<div *ngFor="let x of shoppingarray">
  <!-- Other code here... -->
</div>

我想给用户在最后一分钟向列表添加更多项目的可能性，但不知何故，即使我更新了array和小计，总数也不会刷新。

array我确实通过增加直接影响objectsin 的数量 var 来更新小计，array如下所示：

app.component.ts

AddmoreItemsOFThistype(a) {
  this.shoppingarray[a].qt+= 1;
}

然后我通过将每个小计传递pipe给作为参数的给定来重新计算每个小计，x.qt这是增加的数量（管道只是相乘x.price * x.qt）。

app.component.html

<div> {{ x.price | totalPerItem: x.qt }} </div>

问题是全局total不会更新从filters.

app.component.html

<div> {{ shoppingarray | CalculateTotalpipe }} </div>

CalculateTotalpipe只是循环整个array添加 all totals，不知何故初始total是正确的，但对小计的修改不会生效。

有什么方法可以刷新shoppingarray以CalculateTotalpipe生成更新的total?

有更好的方法吗？

谢谢！

score 0 · Accepted Answer

安德烈斯小心使用不纯的管道。正如文档中所写：

Angular 在每个组件更改检测周期中执行一个不纯管道。不纯管道经常被调用，就像每次击键或鼠标移动一样频繁。

这意味着，每次用户移动鼠标或滚动页面时，您的总金额都会重新计算。这将引入性能问题。

我建议在不使用管道的情况下找到另一种实现总数的方法。为什么不使用简单的服务？

1 回答 1