Как получить данные таблицы Dynami c?

Question

У меня есть следующий 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},
]

Как я могу получить таблицу данных Dynami c

Answer 1

Вы должны использовать 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 при отправке формы, вы увидите, что он включает в себя все данные, которые вы хотите получить в качестве примера атрибутов объекта:

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