[英]How to get dynamic table data?
我有以下 HTML 代码。
<form>
<table id="pklist_tbl" class="table">
<thead>
<tr>
<th>Sl.NO</th>
<th>Item</th>
<th>Carton Order</th>
<th>Carton</th>
<th>Quantity (pcs)</th>
<th>Net Weight(kg)</th>
<th>Gross Weight(kg)</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let PI of AllItems ;let i=index">
<td>{{i+1}}</td>
<td> {{PI.itemName}} </td>
<td><input name="COrder" type="text" class="form-control txt-field"></td>
<td><input name="Cartons" type="text" class="form-control txt-field"></td>
<td><input name="Qty" value="{{PI.ciQty}}" type="text" class="form-control txt-field">
</td>
<td><input name="Net" type="text" class="form-control txt-field"></td>
<td><input name="Gross" type="text" class="form-control txt-field"></td>
</tr>
</tbody>
</table>
<div class="form-group row">
<div class="offset-md-9 col-md-2">
<button type="submit" class="button botn_style" value="Save">Save</button>
</div>
</div>
</form>
我需要结果看起来像这样:
let qry=[{'COrder':'test','Cartons':2,'Cartons':4,'Net':45,'Gross':46},
{'COrder':'test2','Cartons':2,'Cartons':3,'Net':45,'Gross':50}
{'COrder':'test3','Cartons':6,'Cartons':4,'Net':45,'Gross':55},
.......
{'COrder':'test10','Cartons':7,'Cartons':4,'Net':45,'Gross':75},
]
如何获得动态数据表?
您必须使用 Angular 的 ngModel。 只需像这样使用您的 html :
<tr *ngFor="let PI of AllItems ;let i=index">
<td>{{i+1}}</td>
<td> {{PI.itemName}} </td>
<td><input name="COrder" [(ngModel)]="PI.COrder" type="text" class="form-control txt-field"></td>
<td><input name="Cartons" [(ngModel)]="PI.Cartons" type="text" class="form-control txt-field"></td>
<td><input name="Qty" value="{{PI.ciQty}}" type="text" class="form-control txt-field">
</td>
<td><input name="Net" [(ngModel)]="PI.Net" type="text" class="form-control txt-field"></td>
<td><input name="Gross" [(ngModel)]="PI.Gross" type="text" class="form-control txt-field"></td>
</tr>
现在,如果您在表单提交时打印 Allitems 数组,您将看到它包含您想要的所有数据,如 object 属性示例结果:
AllItems[{
itemName: "red",
ciQty: "1",
COrder: "test",
Cartons: "2",
Net: "10",
Gross: "8"}
{
itemName: "green",
ciQty: "2",
COrder: "test2",
Cartons: "4",
Net: "10",
Gross: "9"}]
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.