Как перебирать/отображать массив форм в реактивных формах angular2?

Как заполнить этот JSON в моем EditForm. У меня есть EditForm, в котором я хочу отображать свои данные внутри продуктов, мой ws дает мне этот JSON. Мои данные вне продуктов я могу отображать в html. В чем проблема?

это мой джсон

{
   "StatusCode": 0,
"StatusMessage": "OK",
"StatusDescription": [
    {
        "Products": [
            {
                "p_product_id": "11E8218A54B30C89AE8800FF76874A59",
                "p_product_type_id": "11E7FC041F467AD4B09D00FF76874A59",
                "p_line_num": 233,
                "p_description": "test",
                "p_quantity": 4,
                "p_unit_price": 50,
                "p_subtotal": 120,
                "p_contract_filename": "567897"
            }
        ],
        "sale_item_id": "11E8219D916A69F6AE8800FF76874A59",
        "sale_id": "11E8218B9BA4F278AE8800FF76874A59",
        "client_id": "11E8218A57B28B0AAE8800FF76874A59",
        "salesman_id": "31000000000000000000000000000000",
        "sale_date": "2018-03-06T22:09:43.000Z",
        "notes": "testing",
        "subtotal": 80,
        "total": 50,
        "invoice_number": "28282",
        "invoice_date": "2018-03-06T21:57:41.000Z",
        "amount_paid": 32,
        "lastmoduserid": "31000000000000000000000000000000",
        "lasttodtttm": "2018-03-06T22:09:43.000Z"
    }
]

}

Мой код ТС:

 this.sale.products.forEach(x => {
              (this.editSaleForm.get('products') as FormArray).push(new FormControl(x.products))
            })

html-код:

 <tr class="group" style="cursor: pointer" *ngFor="let sale of editSaleForm.get('products').value; let i = index">
    <td >{{p_product_type_id}}</td>
    <td>{{p_product_id}}</td>
    <td>{{p_unit_price}}</td>
    <td>{{p_quantity}} </td>
  </tr>

typescript angular forms html reactive
person Lonna    schedule 07.03.2018    source источник
comment
let sale of editSaleForm.get('products').value вы пытаетесь получить sale.value за каждую продажу?   -  person sabithpocker    schedule 07.03.2018

Ответы (1)


arrow_upward
0
arrow_downward

Вам нужно будет получить к ним доступ, например {{sale.p_product_type_id}}

<tr class="group" style="cursor: pointer" *ngFor="let sale of editSaleForm.get('products').value; let i = index">
    <td >{{sale.p_product_type_id}}</td>
    <td>{{sale.p_product_id}}</td>
    <td>{{sale.p_unit_price}}</td>
    <td>{{sale.p_quantity}} </td>
  </tr>

Вероятно, вы должны использовать массив FormGroups. И сделайте код примерно таким:

this.sale.products.forEach(product => {
    (this.editSaleForm.get('products') as FormArray).push(this.createFormGroupForPoduct(product))
})

createFormGroupForProduct(product: Product): FormGroup {
    return new FormGroup({
       p_line_num: new FormControl(product.p_line_num),
       p_description: new FormControl(product.p_description, [Validators.required]),
       ......
    })
}

Чтобы вы получили значение FormArray в виде массива продуктов Product[]

Я не знаю, есть ли другие проблемы в вашем коде.

person sabithpocker    schedule 07.03.2018