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树中呈现为节点。

在标签中显示Div并跨越整个表空间

1 个答案: