​​のタグを表示タグとスパン全体の表スペース

Question

最後の列にクリック可能な矢印があるテーブルがあり、その下にネストした表が表示されます。

<table class="table table-hover table-striped"> 
 
    <thead> 
 
     <tr> 
 
      <th>1</th> 
 
      <th>2</th> 
 
      <th>&nbsp;</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr *ngFor="let dData of dDatas;> 
 
      <td>{{dData.Name}}</td> 
 
      <td>{{dData.Desc}}</td> 
 
      <td> 
 
       <div (click)="onClick()"><span class="glyphicon" [ngClass]="{'glyphicon-chevron-up': dcData.opendPanel , 'glyphicon-chevron-down': !dcData.opendPanel }"></span></div> 
 
       <div [hidden]="!dData.opendPanel"> 
 
        //another table 
 
       </div> 
 
      </td> 
 
     </tr> 
 
    </tbody> 
 
</table>

私の問題は、内部表が最後<td>に来て、フォーマットが正しくないです。私は内側のテーブルを新しい行に表示し、外側のテーブルの幅にまたがるようにしたい。

Answer 1

私が正しく理解したら、<ng-container>を利用してください。これにより、forループの各繰り返しに複数の<tr>タグを含めることができ、内部テーブルに行全体を与え、テーブルの幅を広げることができます。

<ng-container *ngFor="let dData of dDatas> 
    <tr > 
     <td>{{dData.Name}}</td> 
     <td>{{dData.Desc}}</td> 
     <td> 
      <div (click)="onClick()"> 
       <span class="glyphicon" [ngClass]="{'glyphicon-chevron-up': dcData.opendPanel , 'glyphicon-chevron-down': !dcData.opendPanel }"></span> 
      </div> 
     </td> 
    </tr> 
    <tr> 
     <td colspan="3"> 
      <div [hidden]="!dData.opendPanel"> 
       //another table 
      </div> 
     </td> 
    </tr> 
</ng-container> 

<ng-container>グループノードに使用することができるが、ノードとしてDOMツリーにレンダリングされていない論理的なコンテナです。