无法在 Angular 的 for 循环中使用 splice 删除项目

Question

我正在尝试使用 splice 从现有数组中删除一个项目，但没有按预期工作。我什至尝试使用过滤器而不是拼接，但得到了相同的输出。有人可以看看这里的功能并帮助我找出问题吗？

请尝试在此处添加可用商品 - https://08b11a0437.stackblitz.io/products 然后导航至购物车页面并尝试删除每件商品。项目没有按预期删除。

相关代码可在 cartservice.ts、cartcomponent.ts(removeProductFromCart()) 和 cartcomponent.html - https://stackblitz.com/edit/08b11a0437?file=app%2Fcart%2Fcart.component.ts

中找到

Answer 1

问题是您正在从 cartService 中的数组中删除项目，但对于 UI 您使用的是产品数组中的值。

快速解决方法是重新加载您的产品数组。只需在 ShoppingCartComponent 中的 removeProductFromCart 函数中添加以下代码即可。在函数末尾添加。

this._cartService.getAddedProducts().subscribe((data: IProduct[]) => {
  this.products = data.map(item => item[0]);      
});

除此之外还有一个问题。您正在使用 *ngIf="removeItemId !== product.id" 隐藏 ShoppingCartComponent html 中的项目。假设您的购物车中有三个产品（id 为 1,2 和 3），当第一个产品被移除时，removeItemId 将有 1，因此第一个产品将被隐藏。但是当用户删除第二个产品时，removeItemId 将设置为 2，现在产品一将可见。

无法在 Angular 的 for 循环中使用 splice 删除项目

Unable to remove items using splice within for loop in Angular

arrays

splice

angular