formArray inside formArray Table Html Angular 5

Question

I have a table and each row belong to formArray and inside each row a loop of column (belong to another formArray).

This is the code html:

<table  *ngIf="startCreate"  class="table table-bordered">
          <thead>
            <tr>
              <th>
                  <span>Code</span>
              </th>
              <th>
                <span>Type de produits</span>
              </th>
              <th>
                <span>Unité</span>
              </th>
              <th *ngFor="let g of genreDiplomatiqueQuotas">
                <input type="hidden" value="{{g.libelle}}">{{g.libelle}}
              </th>
            </tr>
          </thead>
          <tbody formArrayName="refsListQuotas">
            <tr *ngFor="let n of natures; let i = index;" [formGroupName]="i">
             <td><input type="hidden" formControlName="codeiso" [value]="i+1">G{{i+1}}</td>
              <td><input type="hidden" formControlName="codeNature" [value]="n.codeiso">{{n.libelle}}</td>
              <td><input type="hidden" formControlName="unite" [value]="unites[i].libelle">{{unites[i].libelle}}</td>
              <div formArrayName="refsTitulaireQuotas">
              <td *ngFor="let g of genreDiplomatiqueQuotas; let j = index;" [formGroupName]="j">
                <input type="number" min="0" formControlName="valeur" class="form-control"
                  value="{{quotas?.refsListQuotas[i]?.refsTitulaireQuotas[j]?.valeur? quotas.refsListQuotas[i].refsTitulaireQuotas[j].valeur:null}}">
              </td>
            </div>
            </tr>
            <tr *ngIf="!natures?.length">
              <td colspan="11" class="text-center">
                <h4>Aucune donnée disponible</h4>
              </td>
            </tr>
          </tbody>
        </table>

The result of this code is creating the rows but instead of creating the columns for different td in thead it place all the columns inside one th and leave other th blank.

This an explanation of what I want:

----------------------------------------------------------
|header         th1         |    th2   |   th3  |   th4  |
----------------------------------------------------------
|body           td1         |   td2    |  td3   |   td4  |
----------------------------------------------------------

but I get that

----------------------------------------------------------
|header         th1         |    th2   |   th3  |   th4  |
----------------------------------------------------------
|body td1| td2 | td3  | td4 |
-----------------------------

Answer 1

<table  *ngIf="startCreate"  class="table table-bordered">
          <thead>
            <tr>
              <th>
                  <span>Code</span>
              </th>
              <th>
                <span>Type de produits</span>
              </th>
              <th>
                <span>Unité</span>
              </th>
              <th *ngFor="let g of genreDiplomatiqueQuotas">
                <input type="hidden" value="{{g.libelle}}">{{g.libelle}}
              </th>
            </tr>
          </thead>
          <tbody formArrayName="refsListQuotas">
            <tr *ngFor="let n of natures; let i = index;" [formGroupName]="i">
             <td><input type="hidden" formControlName="codeiso" [value]="i+1">G{{i+1}}</td>
              <td><input type="hidden" formControlName="codeNature" [value]="n.codeiso">{{n.libelle}}</td>
              <td><input type="hidden" formControlName="unite" [value]="unites[i].libelle">{{unites[i].libelle}}</td>
              <ng-container formArrayName="refsTitulaireQuotas">
              <td *ngFor="let g of genreDiplomatiqueQuotas; let j = index;" [formGroupName]="j">
                <input type="number" min="0" formControlName="valeur" class="form-control"
                  value="{{quotas?.refsListQuotas[i]?.refsTitulaireQuotas[j]?.valeur? quotas.refsListQuotas[i].refsTitulaireQuotas[j].valeur:null}}">
              </td>
           </ng-container>`enter code here`
            </tr>
            <tr *ngIf="!natures?.length">
              <td colspan="11" class="text-center">
                <h4>Aucune donnée disponible</h4>
              </td>
            </tr>
          </tbody>
        </table>