我有一个嵌套的JSON数组,我必须使用formgroup或formarray迭代到HTML。此响应将根据数组的长度迭代到动态创建的选择框中。 JSON的回应是:
var result = [{
id: 1,
options: [
{ option: 'Ram', toBeSelected: false },
{ option: 'Ravi', toBeSelected: true }
]
},
{
id: 2,
options: [
{ option: 'Pooja', toBeSelected: false },
{ option: 'Prakash', toBeSelected: false }
]
}
]
我必须以这样的方式将其迭代到HTML中,如果这些选项中的任何一个将toBeSelected
作为true
,则应该在HTML中预选该选项,否则,可以显示占位符文本。
根据有问题的JSON
,你可以这样做:
ngOnInit() {
this.form = this._FormBuilder.group({
selections: this._FormBuilder.array([])
});
// the api call should be made here
this.jsonResponse.map(item => {
const opts = item.options.filter(o => {
return o.toBeSelected
});
if (opts.length) {
this.addSelections(opts[0].option);
} else {
this.addSelections();
}
});
}
get selections() {
return this.form.get('selections') as FormArray
}
addSelections(value?: string) {
this.selections.push(
this._FormBuilder.control((value ? value : ''))
);
}
实时查看here。
Stackblitz链接:https://stackblitz.com/edit/dynamic-form-binding-kx7nqf
有什么东西沿着这个?
<div *ngFor="let result of results">
<p>ID - {{ result.id }}</p>
<div *ngFor="let option of result.options">
<input
type="checkbox"
[checked]="option.toBeSelected">
{{ option.option }}
</div>
</div>
这不是FormGroup的一个示例,但应该可以帮助您了解它是如何完成的。