[英]How to iterate/display form array in angular2 reactive forms?
如何在我的EditForm中填充此JSON。 我有EditForm,我想在Products中顯示我的數據,我得到了這個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"
}
]
}
我的ts代碼:
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>
您將必須像{{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>
您可能應該使用FormGroup
的數組。 並使代碼類似於:
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[]
我不知道您的代碼中是否還有其他問題。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.