Вложенный массив массива в угловых реактивных формах на основе JSON

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, эти данные могут иметь различное количество и значения 'people'.Я пытаюсь использовать FormBuiler, FormGroup и FormArray для создания реактивной формы и исправления значений из данных, но у меня возникают проблемы с ее выяснением.Вот изображение того, как пользовательский интерфейс будет выглядеть с возвращенными выше данными ...

Я попытался создать два экземпляра 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>