formArray inside formArray Table Html Angular 5

Question

我有一个表，每一行都属于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>

此代码的结果是创建行，但不是在 thead 中为不同的 td 创建列，而是将所有列放在一个 th 中，而将另一个列留空。

这是对我想要的解释：

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

但我明白了

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