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

Answer 2

尝试将item.quantity添加到您的商品列表中，然后您可以执行以下操作：

<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)]="item.quantity" placeholder = "1">
       <button class="buy" (click)="addToCart( item.name, item.price, item.quantity, item.imgUrl )">buy</button>
      </div>
    </div>

ngFor中的Angular 6 ngModel不起作用

2 个答案: