如何使用Bootstrap和Angular ngFor以及固定缩进创建手风琴表? [英] How to create an accordion table with Bootstrap and Angular ngFor and fixed indentation?

问题描述

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

My goal is to copy this behaviour and to include it in a ngFor loop.

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

I've tried several codes, each one having a different issue:

尝试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个结果，但已合拢:

Try 1 result, collapsed:

尝试1个结果，已部署:

Try 1 result, deployed:

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

In the try 1 the problem is that the collapsed component fits in the left cell, impacting the cells at his right.

尝试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个结果，但已合拢:

Try 2 result, collapsed:

尝试2个结果，已部署:

Try 2 result, deployed:

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

In the try 2 we lose the table indentation when details are collapsed.

尝试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个结果，但已合拢:

Try 3 result, collapsed:

尝试3个结果，已部署:

Try 3 result, deployed:

在try 3中，不同的内部表之间的缩进有所不同.

In the try 3 the indentation differs between the different inner tables.

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

Is there a way to keep the indentation before and after the deploy of the collapsed row? Or maybe another way using something else than a table ?

推荐答案

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

After several tries it seems that the table component doesn't fit well into a Bootstrap grid container. I could get good results using only div tags with Bootstrap grid system.

这篇关于如何使用Bootstrap和Angular ngFor以及固定缩进创建手风琴表?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！