角度：多个下拉列表

Question

我创建了一个面板，可以在其中更改订单状态。列表显示正确，但是有一个问题，因为当我在一个列表中设置值时，它将在所有其他列表中设置相同的值。如何更改它？

     <table id="cart" class="table table-hover"  *ngFor="let order of userOrderList" >
        <thead style="background-color: #F0F8FF">
        <tr>
          <th style="width:20%; text-align: left"><strong>Order id: </strong> {{order.orderId}}</th>
          <th style="width:30%; text-align: left"><strong>Date: </strong>{{order.dateCreated}}</th>
          <select [(ngModel)]="orderSelected" >
              <option  *ngFor='let item of orderState | keys'  [value]="item.key" >{{item.value}}</option>
          </select>
          <th style="width:40%; text-align: right; color: red">Total cost: {{order.totalPrice}}</th>
        </tr>
      </thead>
      <tbody *ngFor="let productOrder of order.OrderIteams" style="border: none">
              <div class="col-sm-4" [routerLink]="['/products-details', productOrder.Product.Id] " ><img src="{{productOrder.Product.Image}}" style="max-width:150px;max-height:150px;padding-top:10px;  padding-right:50px "    class="img-responsive"/></div>
              <div class="col-sm-8">
               <strong> {{productOrder.Product.Name}}</strong>
              </div>
      </tbody>
    </table>

Answer 1

这是因为每个select都绑定到相同的模型orderSelected。因为您希望循环中每个项目都有一个输入，所以最简单的方法是将它绑定到要迭代的每个项目的属性上。

示例：

<select [(ngModel)]="order.orderSelected">

---

完整代码

<table id="cart" class="table table-hover" *ngFor="let order of userOrderList" >
  <thead style="background-color: #F0F8FF">
    <tr>
      <th style="width:20%; text-align: left"><strong>Order id: </strong> {{order.orderId}}</th>
      <th style="width:30%; text-align: left"><strong>Date: </strong>{{order.dateCreated}}</th>
      <select [(ngModel)]="order.orderSelected" >
          <option  *ngFor='let item of orderState | keys'  [value]="item.key" >{{item.value}}</option>
      </select>
      <th style="width:40%; text-align: right; color: red">Total cost: {{order.totalPrice}}</th>
    </tr>
  </thead>
  <tbody *ngFor="let productOrder of order.OrderIteams" style="border: none">
          <div class="col-sm-4" [routerLink]="['/products-details', productOrder.Product.Id] " ><img src="{{productOrder.Product.Image}}" style="max-width:150px;max-height:150px;padding-top:10px;  padding-right:50px "    class="img-responsive"/></div>
          <div class="col-sm-8">
           <strong> {{productOrder.Product.Name}}</strong>
          </div>
  </tbody>
</table>