Question

我有一个* ngFor，我试图在单击时更新一个数字字段，但它会更新所有具有相同值的项目。

在我的html中：

<form *ngFor="let product of products" [formGroup]="myForm" name="myForm" (ngSubmit)="onSubmit([product.name], [product.price], int)">
<div id="cartItemsList">
<ul>
<li>
<div name="product_name">{{product.name }}</div>
<div><img src="../assets/images/gallery/{{product.thumbnail}}" /></div>
<div>{{product.price }}</div>
<button class="minus-btn" (click)="minus()" type="button" name="btn">
<img src="../assets/images/minus.svg" alt="minus" /></button>
<input pattern="^(0|\+?[1-9]\d*)$" class="num" name="int" [value]="int" formControlName="int" ng-model="quantity" ng-minlength="0" type="number">
<button class="plus-btn" (click)="plus()" type="button" name="btn">
<img src="../assets/images/plus.svg" alt="plus" /></button>
<button type="submit" class="btnAddAction">Add to Cart</button>
</li>
</ul>
</div>
</form>

在我的控制器中：

int: number=1;
  
plus(){
this.int++;
}

minus(){ 
this.int--;
}

Answer 1

看看您在做什么：[value]="int"

每种形式的每种产品都使用相同的全局变量“ int”。

您想要做的是：

<input pattern="^(0|\+?[1-9]\d*)$" class="num" name="int" [value]="product.value" 
formControlName="int" ng-model="quantity" ng-minlength="0" type="number">

<button class="plus-btn" (click)="plus(product)" type="button" name="btn">

js：

plus(product:any){
  product.value++;
}

minus(product:any){
  product.value--;
}

除了将ngFor循环放在<form>上外，这可能不是您想要的。您将最终得到一堆名为“ myForm”的表格。

您可能想要的是一种形式，然后有很多产品。

Angular在只更新一个字段时会同时更新所有字段

1 个答案: