angular - Angular:多个下拉列表
问题描述
我创建了可以更改订单状态的面板。列表显示正确但有一个问题,因为当我在一个列表中设置值时,它将在所有其他列表中设置相同的值。如何更改它?
<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>
解决方案
这是因为每个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>
推荐阅读
- reactjs - 我的一个组件没有使用 React Router 加载
- c++ - 在 json 中找不到键名
- javascript - 如何通过循环将属性推送到数组内对象内的数组?
- solidity - 我需要帮助来理解以下代码
- listview - Xamarin Forms更改ListView中每个ViewCell的背景颜色
- json - 显示 json 对象属性 | 离子项目和 Laravel Restful Api
- excel - 计算具有相似数据的唯一单元格在 Excel 中的列之间计数
- selenium - 如何处理应用程序中的动态错误消息
- python - 我在使用这个 pygame 代码时遇到了一些问题
- c - 使用 realloc() 初始化内存