如何重置购物车物品的计数器答案

【问题标题】：How to reset counter of cart items如何重置购物车物品的计数器
【发布时间】：2020-05-21 18:17:18
【问题描述】：

我修改了 Angular 示例购物车应用程序，但我无法以正确的方式重置购物车项目的计数器。提交表单后计数器应该为零。

这是我设法做到的：the application。你可以随意编辑我的代码。

任何帮助将不胜感激:)

【问题讨论】：

这是因为购物车的状态没有在组件之间正确通信。您在 TopBarComponent 中加载项目一次，长度会更新，因为您获得了对服务中项目的引用。在我（谦虚）看来，您应该做的是在CartService 中创建一个Subject，它要么只发出购物车中的物品数量，要么发出所有物品。然后，您可以在应用程序中的任何位置订阅它。这样你就可以解耦你的组件。我认为通过 DI 将您的一个组件放入另一个组件中是一种 hacky。希望有帮助:)

【解决方案1】：

给你：-https://stackblitz.com/edit/angular-5gw71r-ksjm5m。你在卡片和顶栏之间有一个紧密的耦合。我将其移除并使其变得灵活。

【讨论】：

【解决方案2】：

这对我有用

clearCart() {
    this.items.length = 0;
}

我无法向您解释发生了什么，希望有人可以。

【讨论】：

在 Javascript 中对象是通过引用传递的，所以 this.item 是一个对象，在这个项目中，我们直接将 this.items 分配给其他类变量，它们都指向相同的引用，或者你可以说相同的内存对象的位置。（这不是正确的实现方式，其他答案在重构方面做得很好）所以当你这样做时 this.items.length = 0 ;然后该参考部分变得清晰，指向同一位置的所有其他部分也得到更新。（希望这可能会有所帮助）（如前所述 this.items = [] ，将其指向新的内存位置，但其他人仍指向相同的位置
较早的方法可能会在某些实现中导致内存泄漏。