我有JSON结构如下......
data = {
groups: [
{
name: 'Primary',
people: [
{
name: 'Jordan',
begCount: 23,
endCount: 41
},
{
name: 'Mike',
begCount: 18,
endCount: 24
}
]
},
{
name: 'Secondary',
products: [
{
name: 'David',
begCount: 23,
endCount: 41
},
{
name: 'Greg',
begCount: 18,
endCount: 24
}
]
},
{
name: 'Third',
products: [
{
name: 'Josh',
begCount: 23,
endCount: 41
},
]
}
]
};
根据API调用，此数据可能具有不同的“人员”数量和值 . 我正在尝试使用FormBuiler，FormGroup和FormArray来创建一个反应形式和补丁来自数据的值，但我很难搞清楚这一点 . 以下是使用上述返回数据的UI外观图像...
我试图创建一个FormGroup的两个实例，每个实例都有一个数组，但我无法让它工作 . 只是寻找一些关于如何设置它的指针...不担心总数，一旦我正确地嵌套数组，我可以想出来 .
我目前的HTML看起来像这样......
<form [formGroup]="groupForm">
<table *ngFor="let group of data.groups">
<thead>
<th class="group-name">{{group.name}}</span></th>
<th>Beginning Tally</th>
<th>Ending Tally</th>
<th>Total</th>
</thead>
<tbody>
<tr *ngFor="let person of group.people; let i=index" formArrayName="people" [formGroupName]="i">
<td><input type="text" formControlName="name"></td>
<td><input type="number" formControlName="begCount"></td>
<td><input type="number" formControlName="endCount"></td>
<td><input type="number" disabled></td>
</tr>
<tr class="grand-total">
<td></td>
<td></td>
<td class="total-label grey"><span>Totals</span></td>
<td class="grey"></td>
<td></td>
</tr>
</tbody>
</table>
</form>