Question

我的页面有四张桌子。一个人的尺寸与其他三个小桌子差不多。我想在有足够空白空间的应用程序详细信息下面显示贷款详细信息和信用详细信息表。

我正在为网格系统使用flex布局。使用flex布局的fx flex属性是否有任何解决方法。

这是我的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

您已在不同的容器中添加了表，这些表创建了不同的块。申请，贷款和信贷表应该是单个div，fxFlex =＆＃34; 50％＆＃34;

此外，我已使用class属性更新了每个表的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编辑器网址 - https://stackblitz.com/edit/angular-flex-layout-seed-mnvyly

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

如何将贷款明细和信用明细表放在应用程序详细信息下面，这是一个空白区

2 个答案: