formArray внутри formArray Таблица HTML угловой 5 - PullRequest
Новая
       22

formArray внутри formArray Таблица HTML угловой 5

0 голосов
/ 05 сентября 2018

У меня есть таблица, и каждая строка принадлежит 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  |
----------------------------------------------------------

но я понял 

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

1 Ответ

0 голосов
/ 10 мая 2019 
<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>
...