formArray表格内的formArray HTML5

我有一个表，每一行属于formArray，每一行中有一个列循环（属于另一个formArray）

这是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>

但我明白了

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

密码
产品类型
单位
{{g.libelle}}
G{{i+1}}
{{n.libelle}}
{{unites[i].libelle}
`在这里输入代码`
有争议的

仅用于第二个FromArray而不是使用。请参阅Stackbliz链接。

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

<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>