twitter-bootstrap – 如何用Bootstrap和Angular ngFor创建一个

发布时间：2020-12-17 21:23:13 所属栏目：安全来源：网络整理

导读：我的目标是复制 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]=

我的目标是复制 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结果,折叠：

Try 1 result,collapsed

尝试1个结果,部署：

Try 1 result,deployed

在尝试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结果,折叠：

Try 2 result,collapsed

尝试2结果,部署：

Try 2 result,deployed

在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结果,折叠：

enter image description here

尝试3结果,部署：

enter image description here

在try 3中,不同内表之间的缩进不同.

有没有办法在部署折叠行之前和之后保留缩进？
或者使用其他方式而不是表格？

解决方法

感谢您的帖子,它帮助我指导了我的项目正确的方向.我想我会发布我正在做的事情,尽管它并不完全一样.它可能会帮助正在尝试同样事情的其他人.我停止使用ng-bootstrap的折叠以使其工作.对不起,如果我的术语有误,我是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;
}

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!