formArray里面的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 内，而将其他 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>