Show Div in​​标记和跨越整个表空间

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树中为节点则不呈现的逻辑容器。