[英]How to display data from array "Products": [{}]
如何在我的 EditForm 中填充這個 JSON。 我有 EditForm,我想顯示我的數據,我的 ws 給我這個 JSON。 我在Products
外面的數據我可以用 html 顯示,但是 Products 里面的數據我不知道為什么不顯示。 問題是什么?
這是我的傑森
{
"StatusCode": 0,
"StatusMessage": "OK",
"StatusDescription": [
{
"Products": [
{
"p_id": "11E8218A54B30C89AE8800FF76874A59",
"p_pt_id": "11E7FC041F467AD4B09D00FF76874A59",
"p_l": 233,
"p_d": "test",
"p_q": 4,
"p_u_p": 50,
"p_s": 120
}
],
"sale_item_id": "11E8219D916A69F6AE8800FF76874A59",
"sale_id": "11E8218B9BA4F278AE8800FF76874A59",
"client_id": "11E8218A57B28B0AAE8800FF76874A59",
"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
}
]
}
我的 ts 代碼。
editForm: FormGroup;
this.editForm = this.fb.group({
'sale_id': new FormControl('', Validators.required),
'client_id': new FormControl('', Validators.required),
'sale_date': new FormControl('', Validators.required),
'notes': new FormControl('', Validators.required),
'total': new FormControl('', Validators.required),
'p_d': new FormControl('', Validators.required),
'p_pt_id': new FormControl('', Validators.required),
'p_l': new FormControl('', Validators.required),
'products': new FormControl([])
});
populateForm() {
this.activatedRoute.params.subscribe(
params => {
this.ws.salegetbyid(params['id']).subscribe(
sale => {
this.sale = sale;
this.editForm.controls['sale_id'].setValue(sale.sale_id);
this.editForm.controls['client_id'].setValue(sale.client_id);
this.editForm.controls['sale_date'].setValue(sale.sale_date);
this.editForm.controls['notes'].setValue(sale.notes);
this.editForm.controls['total'].setValue(sale.total);
this.editForm.patchValue({
p_pt_id: this.sale.products.map(x => x.p_pt_id),
p_l: this.sale.products.map(x => x.p_l),
p_d: this.sale.products.map(x => x.p_d)
})
}
);
}
);
}
還有我的 html 代碼
<form [formGroup]="editForm" (ngSubmit)="oneddit()" class="col s12" materialize>
<div class="contant">
<div class="row">
<div class="input-field col s4">
sale_id:
<input formControlName="sale_id" id="sale_id" type="text" class="validate">
</div>
<div class="input-field col s4">
client_id:
<input formControlName="client_id" id="client_id" type="text" class="validate">
</div>
<div class="input-field col s4">
sale_date:
<input formControlName="sale_date" id="sale_date" type="text" class="validate">
</div>
<div class="input-field col s4">
notes:
<input formControlName="notes" id="notes" type="text" class="validate">
</div>
<div class="input-field col s4">
total:
<input formControlName="total" id="total" type="number" class="validate">
</div>
</div>
</div>
<br>
<table align="center" class="table table-bordered table-hover">
<thead>
<tr style="color:black;">
<th>p_d</th>
<th>p_pt_id</th>
<th>p_l</th>
</tr>
</thead>
<tbody>
<tr class="group" style="cursor: pointer" *ngFor="let item of products;">
<td>{{item.p_d}}</td>
<td>{{item.p_pt_id}}</td>
<td>{{item.p_l}} </td>
</tr>
</tbody>
</table>
<br>
<div class="row" style="float: right;">
<button id="add_client_button" type="submit" class="btn waves-effect waves-light">
Register
</button>
</div>
</form>
我改變了這個代碼,比如
ts 代碼:
'products': this.fb.array([])
this.sale.products.forEach(x => {
(this.editForm.get('products') as FormArray).push(new FormControl(x.products))
})
並在 html 中:
<tbody>
<tr class="group" style="cursor: pointer" *ngFor="let item of editForm.get('products').value; let i = index">
<td>{{item.p_d}}</td>
<td>{{item.p_pt_id}}</td>
<td>{{item.p_l}} </td>
</tr>
</tbody>
但此更改向我顯示此錯誤:錯誤類型錯誤:無法在 Object.eval [as updateRenderer] 處讀取 null 的屬性 'item.p_d'
你能幫我嗎,有什么問題嗎?
我解決了這個問題,就像這樣
this.sale.products.forEach(product => {
(this.editForm.get('products') as FormArray).push(this.createFGPoduct(product))
})
createFGPoduct(product: Product): FormGroup {
return new FormGroup({
p_id: new FormControl(product.p_id),
p_pt_id: new FormControl(product.p_pt_id, [Validators.required]),
p_l: new FormControl(product.p_l, [Validators.required]),
p_d: new FormControl(product.p_d, [Validators.required])
})
}
HTML 代碼。
<tbody>
<tr class="group" style="cursor: pointer" *ngFor="let item of editForm.get('products').value; let i = index">
<td>{{item.p_d}}</td>
<td>{{item.p_pt_id}}</td>
<td>{{item.p_l}} </td>
</tr>
</tbody>
首先放入你的html
{{editForm.value | json}}
{{editForm.value | json}}
看看你有什么。
其次,我認為this.sale.products
指的是StatusDescription
。 現在products
是一個讓我們說product
對象的數組。 您向products
詢問product
屬性。 因此,假設您正確映射了您的對象,您將需要editForm.get('products').value
in html
。 表單數組是FormGroup
數組,它們又具有FormControl
嘗試這個:
this.sale.products.forEach(x => {
(this.editForm.get('products') as FormArray).push(new FormGroup({
p_id: x.p_id,
p_l: x.p_l // and so on
}))
})
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.