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

Posted 2023-03-05

【中文标题】如何使用 Bootstrap 和 Angular ngFor 和固定缩进创建手风琴表？

【英文标题】：How to create an accordion table with Bootstrap and Angular ngFor and fixed indentation?

【发布时间】：2017-12-20 08:51:34

【问题描述】：

我的目标是复制 this behaviour 并将其包含在 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 结果，部署：

在 try 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 中，不同内表的缩进不同。

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

【参考方案1】：

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

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

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

HTML：

表ID：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;

希望对路人有帮助！

【参考方案2】：

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

【参考方案3】：

很简单，

使用 Angular 引导程序包的手风琴，如下所述：

<ngb-accordion #acc="ngbAccordion" activeIds="ngb-panel-0">
  <ngb-panel title="Simple">
    <ng-template ngbPanelContent>
      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia
      aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor,
      sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica,
      craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings
      occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
      labore sustainable VHS.
    </ng-template>
  </ngb-panel>

</ngb-accordion>

详情点击here

GIF of above example

【讨论】：

我会试试的。但我有疑问，因为这个例子不涉及表格，这就是问题所在。

@coli 你能提一下为什么使用 table 对你的问题很重要。

我确认您的建议没有帮助。题目中提到了“table”和“indentation”，我觉得够用了。

不，不是，它还说明了手风琴、角度和引导

我不明白你。您认为问题中究竟缺少什么？