angular - JSON に基づく Angular Reactive Forms のネストされた FormArray

Question

私は次のように構造化された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 の 2 つのインスタンスを作成しようとしましたが、それを機能させることができませんでした。これを設定する方法についていくつかの指針を探しているだけです...合計を心配する必要はありません。配列を適切にネストすると、それを理解できます。

私の現在の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>