0

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

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

这是我想要的解释：

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

但我明白了

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

1 回答 1

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>
于 2019-05-10T10:51:45.500 回答