如何将贷款详细信息和信用详细信息 table 放在空的 space 申请详细信息下方

Question

我有四个 table 页面。一个的体型和其他三个小的差不多table。我想将贷款详细信息和信用详细信息 table 放在应用程序详细信息下方，其中有足够的空白 space。

我正在为网格系统使用弹性布局。是否有任何解决方法可以使用 fx flex 属性 of flex layout.

来实现此目的

这是我的html代码

            <div class="container" fxLayout fxLayout.xs="column">
                <div class="item item-1" fxFlex="50%">
                    <table id="customers" *ngIf="customerData">
                        <caption class="caption">
                            <h4>Customer Details</h4>
                        </caption>
                        <tr *ngFor="let item of customerData">
                            <td width="50%">
                                {{item.key}}
                            </td>
                            <td width="50%">{{item.value}}</td>
                        </tr>
                    </table>

                </div>
                <div class="item item-2" fxFlex="50%">
                    <table id="customers" *ngIf="applicationData">

                        <caption class="caption">
                            <h4>Application Details</h4>

                        </caption>
                        <tr *ngFor="let item of applicationData">

                            <td width="50%">
                                {{item.key}}
                            </td>
                            <td width="50%">{{item.value}}</td>
                        </tr>
                    </table>

                </div>
            </div>

            <div class="container" fxLayout fxLayout.xs="column">
                <div class="item item-1" fxFlex="50%">
                    <table id="customers" *ngIf="loanData">

                        <caption>
                            <h4>Loan Details</h4>

                        </caption>
                        <tr *ngFor="let item of loanData">

                            <td width="50%">
                                {{item.key}}
                            </td>
                            <td width="50%">{{item.value}}</td>
                        </tr>
                    </table>

                </div>
                <div class="item item-2" fxFlex="50%">
                    <table id="customers" *ngIf="creditData">

                        <caption>
                            <h4>Credit Details</h4>

                        </caption>
                        <tr *ngFor="let item of creditData">

                            <td width="50%">
                                {{item.key}}
                            </td>
                            <td width="50%">{{item.value}}</td>
                        </tr>
                    </table>

                </div>
            </div>

Answer 1

这并没有单独使用 fxFlex 属性，但是您是否反对像这样简单地嵌套 flexLayouts？

<div class="bounds">

<div class="container" fxLayout fxLayout.xs="row">
    <div class="item item-1" fxFlex="50%">
        <table id="personal" *ngIf="customerData">
            <caption class="caption">
                <h4>Customer Details</h4>
            </caption>
            <tr *ngFor="let item of customerData">
                <td width="50%">
                    {{item.key}}
                </td>
                <td width="50%">{{item.value}}</td>
            </tr>
        </table>

    </div>
    <div class="item item-2 container" fxFlex="50%" fxLayout fxLayout="column">
        <table id="personal" *ngIf="applicationData" fxFlex>

            <caption class="caption">
                <h4>Application Details</h4>

            </caption>
            <tr *ngFor="let item of applicationData">

                <td width="50%">
                    {{item.key}}
                </td>
                <td width="50%">{{item.value}}</td>
            </tr>
        </table>
        <table id="personal" *ngIf="loanData" fxFlex>

            <caption class="caption">
                <h4>Loan Details</h4>

            </caption>
            <tr *ngFor="let item of loanData">

                <td width="50%">
                    {{item.key}}
                </td>
                <td width="50%">{{item.value}}</td>
            </tr>
        </table>
        <table id="personal" *ngIf="creditData" fxFlex>

            <caption class="caption">
                <h4>Credit Details</h4>

            </caption>
            <tr *ngFor="let item of creditData">

                <td width="50%">
                    {{item.key}}
                </td>
                <td width="50%">{{item.value}}</td>
            </tr>
        </table>

    </div>
</div>      
</div>

顺便说一句，我没有解决这个问题，但每个 ID 都应该是唯一的 -- 你不应该多次使用 ID "personal"。

Answer 2

您已在创建不同块的不同容器中添加了 table。申请、贷款和信贷 table 应该是单个 div 且 fxFlex="50%"

我还用 class 属性更新了每个 table 的 ID，并更新了 css 以使用 class 而不是 ID。 ID 在 DOM.

中是唯一的

<div class="bounds">

    <div class="container" fxLayout fxLayout.xs="row">
                <div class="item item-1" fxFlex="50%">
                    <table class="personal" *ngIf="customerData">
                        <caption class="caption">
                            <h4>Customer Details</h4>
                        </caption>
                        <tr *ngFor="let item of customerData">
                            <td width="50%">
                                {{item.key}}
                            </td>
                            <td width="50%">{{item.value}}</td>
                        </tr>
                    </table>

                </div>
                <div class="item item-2" fxFlex="50%">
                    <table class="personal" *ngIf="applicationData">

                        <caption class="caption">
                            <h4>Application Details</h4>

                        </caption>
                        <tr *ngFor="let item of applicationData">

                            <td width="50%">
                                {{item.key}}
                            </td>
                            <td width="50%">{{item.value}}</td>
                        </tr>
                    </table>
                     <table class="personal" *ngIf="loanData">

                        <caption>
                            <h4>Loan Details</h4>

                        </caption>
                        <tr *ngFor="let item of loanData">

                            <td width="50%">
                                {{item.key}}
                            </td>
                            <td width="50%">{{item.value}}</td>
                        </tr>
                    </table>
                    <table class="personal" *ngIf="creditData">

                        <caption>
                            <h4>Credit Details</h4>

                        </caption>
                        <tr *ngFor="let item of creditData">

                            <td width="50%">
                                {{item.key}}
                            </td>
                            <td width="50%">{{item.value}}</td>
                        </tr>
                    </table>
                </div>
            </div>
    </div>

更新了 stackblitz 编辑器 URL - https://stackblitz.com/edit/angular-flex-layout-seed-mnvyly

在此处查看完整的 o/p - https://angular-flex-layout-seed-mnvyly.stackblitz.io/

如何将贷款详细信息和信用详细信息 table 放在空的 space 申请详细信息下方

How can I put loan detail and credit detail table below application detail which is an empty space

css

angular

angular-flex-layout