[英]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.