首页 文章

ngFor中的Angular 6 ngModel不起作用

提问于
浏览 次
0

我在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'？

javascript html angular

2 回答

  • 1

    将另一个属性添加到对象数组，然后分配 ngModel ，

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

    尝试将 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>
    回复于

相关问题