如何获取动态表数据？

Question

I have the following HTML code.

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

I need the result to look like this:

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},
]

How could I get a dynamic data table?

Answer 1

You must use angular's ngModel. Just use your html like this:

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

Now if you print Allitems array at form submit you will see that it includes all the data you want as object attributes sample result:

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"}]