Angular: Multiple drop down list

Question

I created panel where I can change the status of the order. List is displayed correctly but there is one problem, because when I set the value in one list it will set the same value in all the others.How to change it?

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

Igor · Accepted Answer · 2019-03-07 19:41:07Z

1

It is because each select is bound to the same model which is orderSelected. As you want an input per item in the loop the easiest thing to do would be to bind it on a property of each item you are iterating over.

Example:

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

Full code

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

answered Mar 7, 2019 at 19:41

Igor

62.5k10 gold badges111 silver badges181 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Cyril Over a year ago

Or just create an orderSelectedArray, add let i = index at the end of your ngFor and bind your select to orderSelectedArray[i]

Igor Over a year ago

@Cyril - also equally valid.

Collectives™ on Stack Overflow

Angular: Multiple drop down list

1 Answer 1

Full code

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Full code

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related