如何使用Bootstrap和Angular ngFor和固定缩进创建手风琴表？

Question

我的目标是复制此行为并将其包含在ngFor循环中。

我尝试了几种代码，每个代码都有不同的问题：

尝试1：

<table class="table">
    <tbody>
        <tr *ngFor="let game of games; let i = index" class="clickable-row" data-toggle="collapse" [attr.data-target]="'#gameDetails' + i">
            <td class="text-nowrap">{{game.date}}
                <div [attr.id]="'gameDetails' + i" class="collapse">
                    <p>Insert a large component in this place</p>
                </div>
            </td>
            <td class="text-nowrap">{{game.label}}</td>
            <td class="text-nowrap">{{game.score}}</td>
        </tr>
    </tbody>
</table>

尝试1个结果，但已崩溃：

尝试1个结果，已部署：

在尝试1中，问题在于折叠的组件适合左侧单元格，从而影响了右侧单元格。

尝试2：

<table class="table">
    <tbody>
        <div *ngFor="let game of games; let i = index">
            <tr class="clickable-row" data-toggle="collapse" [attr.data-target]="'#game2Details' + i">
                <td class="text-nowrap">{{game.date}}</td>
                <td class="text-nowrap">{{game.label}}</td>
                <td class="text-nowrap">{{game.score}}</td>
            </tr>
            <tr [attr.id]="'game2Details' + i" class="collapse">
                <td colspan="3">Insert a large component in this place</td>
            </tr>
        </div>
    </tbody>
</table>

尝试2结果，崩溃：

尝试2结果，部署：

在尝试2中，当细节折叠时，我们会丢失表缩进。

尝试3：

<table class="table">
    <tbody>
        <tr *ngFor="let game of games; let i = index">
            <table class="table">
                <tbody>
                    <tr class="accordion-toggle" data-toggle="collapse" [attr.data-target]="'#game4Details' + i">
                        <td>{{game.date}}</td>
                        <td>{{game.label}}</td>
                        <td>{{game.score}}</td>
                    </tr>
                    <tr>
                        <td colspan="3" class="hiddentablerow">
                            <div [attr.id]="'game4Details' + i" class="accordian-body collapse">Insert a large component in this place
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </tr>
    </tbody>
</table>

尝试3结果，崩溃：

尝试3结果，部署：

在try 3中，不同的内部表之间的缩进不同。

有没有办法在展开折叠行之前和之后保持缩进？还是使用表格以外的其他方式？

Answer 1

感谢您的帖子，它帮助我引导我的项目朝着正确的方向发展。我想我会发布我在做什么，即使它不完全相同。它可能会帮助正在尝试同样事情的其他人。我停止使用 ng-bootstrap 来让它Collapse工作。抱歉，如果我的术语有误，我是 Angular 的新手。

我正在处理的是一个大表，其中包含从 JSON 文件中提取的数据。表格行的末尾是一个按钮，单击该按钮时会显示包含更多数据的另一行。

我能够在不扭曲原始行的情况下完成这项工作。这是我的结果，以及我使用的 CSS。我对一些东西进行了硬编码以进行测试，仅供参考。

HTML：

表号： subs-table

<ng-container *ngFor="let sub of subs; index as i">
    <tr>
        <th scope="row">{{sub.Name}}</th>
        <td><img src="../../assets/{{sub.Image}}"></td>
        <td>{{sub.Description}}</td>
        <td>
            <button class="btn btn-outline-primary btn-block" type="button" data-toggle="collapse" [attr.data-target]="'#collapse-' + i" [attr.aria-expanded]="false" [attr.aria-controls] = "'collapse-' + i"></button>
        </td>
    </tr>
    <tr>
        <td colspan="4" class="collapse-row">
            <div [attr.id]="'collapse-' + i" class="container collapse out">
                <div class="row">
                    <div class="col">Min Splash Damage: 25</div> 
                    <div class="col">Splash Damage: 35</div>
                    <div class="col">Direct Hit Damage: 60</div>
                    <div class="col">Ink Consumption: 40%</div>
                </div>
            </div>
        </td>
    </tr>
</ng-container>

CSS：

/* Sets button text when clicked. Should combine these later with wildcards */
#subs-table .btn-primary:before {
    content:'Click for details';
}
#subs-table .btn-primary[aria-expanded="true"]:before {
    content:'Close Details';
}
/* Styling of the collapsible row */
#subs-table td.collapse-row {
    border-style: none;
    padding: 0;
}

我希望这可以帮助任何路人！

Answer 2

经过几次尝试后，表格组件似乎不太适合 Bootstrap 网格容器。我可以仅使用带有 Bootstrap 网格系统的 div 标签获得良好的结果。