我初始化了一个 FormBuilder 并在我将数据放入其中之后，如下面的代码：
generateTable(dataJobs: any): void {
this.formBuilder = this.fb.group({
jobs: this.fb.array([
this.fb.group({
name: this.fb.control(null),
operations: this.fb.array([])
})
])
})
this.jobs.removeAt(0)
for (let i = 0; i < dataJobs.length; i++) {
this.jobs.push(this.fb.group({ name: dataJobs[i].name, operations: [dataJobs[i].operations] }))
}
}
我有这种方法来访问工作
get jobs() {
return this.formBuilder.get('jobs') as FormArray;
}
formBuilder 的值是这样的：
{
"jobs": [
{
"name": "job0",
"operations": [
"(M0,3)",
"(M1,2)"
]
},
{
"name": "job1",
"operations": [
"(M1,3)",
"(M1,2)"
]
}
]
}
我试图在 html 中执行以下代码，但我没有得到任何东西
<table>
<form [formGroup]="formBuilder">
<thead>
<tr class="fw-bolder fs-6 text-gray-800">
<th>#</th>
<th>2</th>
<th>2</th>
</tr>
</thead>
<tbody>
<tr formArrayName="jobs"
*ngFor="let jobs of formBuilder.get('jobs')['controls']; let i=index">
<td formArrayName="operations"
*ngFor="let operations of formBuilder.get('jobs')['controls'][i].get('operations')['controls']; let ind =index">
{{operations}} {{ind}}
</td>
<td>Tiger Nixon</td>
<td>Tiger Nixon</td>
</tr>
</tbody>
</form>
</table>
如何使用 formBuilder 制作表格？
不允许在表格内添加表格，它被认为是无效的 html。将表格移到表格外
<form [formGroup]="formBuilder">
<table>
<thead>
<tr class="fw-bolder fs-6 text-gray-800">
<th>#</th>
<th>2</th>
<th>2</th>
</tr>
</thead>
<tbody>
<tr
formArrayName="jobs"
*ngFor="let jobs of formBuilder.get('jobs')['controls']; let i = index"
>
<ng-container [formGroupName]="i">
<td
formArrayName="operations"
*ngFor="
let operation of formBuilder
.get('jobs')
['controls'][i].get('operations')['controls'];
let ind = index
"
>
{{ operation.value }} {{ ind }}
</td>
</ng-container>
<td>Tiger Nixon</td>
<td>Tiger Nixon</td>
</tr>
</tbody>
</table>
</form>
然后，您需要为操作键创建控件数组，而不是直接分配数组值
for (let i = 0; i < dataJobs.length; i++) {
this.jobs.push(this.fb.group({ name: dataJobs[i].name, operations:
this.fb.array( dataJobs[i].operations.map(operation=>this.fb.control(operation))) }))
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句