【发布时间】：2019-01-12 18:28:51
【问题描述】：
我想我只是不明白 ngFor 是如何工作的。为什么角度检查值这么多次？请记住，我希望更新值。请解释一下，因为我完全迷路了。
提供一些背景信息：
我有一个产品页面，用于检查购物车项目并显示特定产品的购物车中有多少项目。当前显示 11，此时购物车中只有两件商品。
购物车作为一个对象保存在 localStorage 中，其中列出了用户添加到购物车中的商品。我可以在 Chrome 开发工具>应用程序>购物车中看到 - 对象及其包含的项目数。
以下是我的 Product 模型，与我的购物车对象的结构相同：
export interface Product {
product: {
id: number;
name: string;
category: string;
price: string;
ts: string;
product_image_id: number;
product_image: string;
enabled: boolean;
counter: number;
};
}
下面是 getTotalItems(item) 方法，它计算特定产品的购物车中有多少商品，当与产品的 id 匹配时，它基本上会增加 item.counter：
getTotalItems(item) {
if (localStorage.getItem("cart")) {
for (let u = 0; u < this.cartObj.cart.products.product.length; u++) {
if (item.id === this.cartObj.cart.products.product[u].id) {
item.counter += this.cartObj.cart.products.product[u].counter;
}
}
} else {
item.counter = 0;
}
return item.counter;
}
请注意 item.counter 在 for 循环中被更新，但 for 循环应该只适用于购物车中的两个项目。我想知道为什么 Angular 会尝试更新 11 次：
for (let u = 0; u < this.cartObj.cart.products.product.length; u++) {
if (item.id === this.cartObj.cart.products.product[u].id) {
item.counter += this.cartObj.cart.products.product[u].counter;
}
}
以下是从购物车服务调用 getTotaltItems(item) 方法的 html，以及来自我的产品服务的过滤产品，位于产品组件的构造函数中：
this.prdSrvc.getAllProducts().subscribe(resProd => {
this.filteredProducts = this.products = resProd.products;
<ng-container *ngFor="let item of filteredProducts; let i = index">
<div class="card-body">
<h5 class="card-title">{{ item.name }}</h5>
<p class="card-text">{{ item.category }}</p>
<p class="card-text">{{ item.price | currency }}</p>
</div>
<div class="card-footer">
<div class="row no-gutters">
<div class="col-2">
<button
(click)="removeFromCart(item)"
class="btn btn-secondary btn-block"
>
-
</button>
</div>
<div class="col text-center">
{{ this.cartSrvc.getTotalItems(item) }} in cart
</div>
<div class="col-2">
<button
(click)="addToCart(item)"
class="btn btn-secondary btn-block"
>
+
</button>
</div>
</div>
</div>
在 getTotalItems 方法中，我放置了以下 console.log：
console.log("item.id: " + item.id + "item.counter: " + item.counter);
起初，它工作得很好，找到 item.id 并且计数器会随着它在购物车中找到匹配的 id 而增加。就我而言，购物车中只有两件商品：
如您所见，一旦通过了第二项，它就继续检查，从而导致错误。
我的问题基本上是，为什么 for 循环遍历购物车中的所有项目后它不会停止？在这种情况下，只有两项，为什么 Angular 在这两项之后一直检查？
提前致谢
顺便说一句，我还尝试通过执行以下操作来限制调用 getTotalItems 的次数，但结果相同：
<div
*ngIf="item.counter > 0; else justZero"
class="col text-center"
>
{{ this.cartSrvc.getTotalItems(item) }} in cart
</div>
<ng-template #justZero>
<div class="col text-center">0 in cart</div>
</ng-template>
【问题讨论】：
-
我在发布的代码中没有看到任何
ngFor。我想“卡片”在里面？ -
@Jeto，感谢您的回复 - ngFor 在我粘贴的代码上方 -
- 就像任何我制作的其他 ngFor -
什么是
filteredProducts？你在问为什么你的循环没有停止，所以我觉得这是一个重要的分享。该错误表明您正在循环期间修改其内容。在任何情况下，您都应该编辑您的问题，而不是在评论中发布它。另外，如果可以的话，考虑创建一个StackBlitz（但也许我们可以提供帮助）。 -
@Jeto，感谢您的回复。 filtersProducts 是从我的产品服务返回的内容。产品加载得很好。我只希望购物车中的商品出现在每个产品下。在这种情况下，购物车中只有两件商品，但角度数为 11。有十五种产品。请专注于 getTotalItems(item) 方法。如果我从 html 中删除它，产品加载正常，没有任何错误，再次感谢您
-
@Jeto，我已经更新了帖子以提供更多信息