Angular正在同时更新所有字段，而它应该只更新一个字段

我有一个*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>

---

看看你在做什么：

[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">

此外，您已将ngFor循环置于

上，这可能不是您想要的。您将得到一大堆表单，所有表单都命名为“myForm”

---

您可能想要的是一个表单，然后有一组产品。

请正确设置示例代码的格式，因为它很难阅读。我要求提供代码格式。我认为您需要像这里一样实现FormArray。格式化是指只在HTML中添加缩进吗？我将type=“number”更改为type=“text”，然后显示输入字段。当我使用type=“number”时，我得到了一个错误：指定的值“NaN”无法解析，或者超出范围。我的ngFor循环需要打开，因为ngSubmit使用循环通过值。我对答案进行了更改。您的输入可以保留数字。它是需要与特定产品关联的[价值]。未绑定到全局变量。您可能需要将所有product.value字段初始化为“1”。这可能就是为什么会出现NaN错误。我尝试使用parseInt，但我的plus函数的参数出现错误：函数实现名称必须为“parseInt”。

<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">

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

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