javascript - ngFor 中的 Angular 6 ngModel 不起作用

Question

我在 ngFor 循环中使用 ngModel 时遇到问题。我正在制作电子商务应用程序，我想获取带有数量的输入值，但每个 ngModel 都有相同的名称，因此它会不断更新所有输入，如下所示: Img这是我的页面代码:

<div class="grid-container"> <!--  items  -->
    <div *ngFor="let item of items;" class="grid-item" >
      <img class="itemAv" src="{{item.imgUrl}}" width="100px" height="100px">
      <p>{{item.name}}</p>
      <p>${{item.price}}</p>
      <p>{{item.description}}</p>
      <div class="buy">
       <input class="quants" name="quants" type="number" min="0" max="100" [(ngModel)]="quants" placeholder = "1">
       <button class="buy" (click)="addToCart( item.name, item.price, quants , item.imgUrl )">buy</button>
      </div>
    </div>

任何想法如何解决这个问题，或者如何添加动态 ngModel 名称，如“quant+item.id”？

Answer 1

向对象数组添加另一个属性，然后分配 ngModel，例如，

 <input class="quants" name="quants" type="number" min="0" max="100" [(ngModel)]="item.quants" placeholder = "1">