web-dev-qa-db-ja.com

BootstrapおよびAngular ngForおよび固定インデントを使用してアコーディオンテーブルを作成するにはどうすればよいですか？

私の目標は、 この動作 をコピーして、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

試行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では、インデントは異なる内部テーブル間で異なります。

折りたたまれた行の展開の前後にインデントを維持する方法はありますか？それとも、テーブル以外のものを使用する別の方法ですか？

twitter-bootstrapangulartwitter-bootstrap-3html-table
7
Coli

何度か試したところ、テーブルコンポーネントがBootstrapグリッドコンテナにうまく収まらないようです。Bootstrap gridのdivタグのみを使用すると、良い結果が得られました。システム。

0
Coli

あなたの投稿に感謝します、それは私のプロジェクトで正しい方向に私を導くのを助けました。まったく同じではありませんが、自分がやっていることを投稿すると思いました。同じことをしようとしている他の誰かを助けるかもしれません。これを機能させるために、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;
}

これが通行人の助けになることを願っています！

1
progdawn