Question

我正在实施角度4应用程序。我试图以表格格式显示数据，我已经在某种程度上做了，但需要在特定行中引入间距。例如，我需要在Net Premiums Written之后引入空间。我可能需要以编程方式进行。我如何实现这一目标。

html代码

<!-- Card -->
<div class="card">
    <!-- Financial Statement -->
    <div class="card-header" role="tab" id="fs_heading">
        <a [ngClass]="{'collapsed': !isExpanded}" data-toggle="collapse" href="javascript:void(0);" (click)="isExpanded = !isExpanded"
            role="button" [attr.aria-expanded]="isExpanded" aria-controls="nva">
            <h5 class="mb-0">Financial Summary for {{strategyName}}</h5>
        </a>
    </div>
    <div [ngClass]="{'show': isExpanded}" id="fs" class="collapse" role="tabpanel" aria-labelledby="nva_heading" data-parent="#nva"
        [attr.aria-expanded]="isExpanded">

        <div class="card-body">
            <ul class="nav nav-pills financial-tab" id="financial-tab" role="tablist">
                <li class="nav-item">
                    <a  [ngClass]="selectedFinancialOption===1 ? 'active' : ''" class="nav-link" id="sincome-tab" data-toggle="pill" href="javascript:void(0);" role="tab" aria-controls="table"
                        (click)="onTabClick(1)">Income Statement</a>
                </li>
                <li class="nav-item">
                    <a [ngClass]="selectedFinancialOption===2 ? 'active' : ''" class="nav-link" id="cash-tab" data-toggle="pill" href="javascript:void(0);" role="tab" aria-controls="chart" aria-selected="false"
                        (click)="onTabClick(2)">Cash Flow Statement</a>
                </li>
                <li class="nav-item">
                    <a [ngClass]="selectedFinancialOption===3 ? 'active' : ''" class="nav-link" id="balance-tab" data-toggle="pill" href="javascript:void(0);" role="tab" aria-controls="chart" aria-selected="false"
                        (click)="onTabClick(3)">Balance Sheet</a>
                </li>
            </ul>
            <div class="tab-content Financial-content" id="pills-tabContent">
                <!-- Income table -->
                <div *ngIf="selectedFinancialOption===1 && fsIncomeStatementTable && fsIncomeStatementTable.length > 0" class="tab-pane fade active show" id="base-strategy--fs-statement" role="tabpanel" aria-labelledby="table-tab"
                    aria-expanded="false">
                    <table class="table">
                        <thead>
                            <tr style="height:50px">
                                <th *ngFor="let cell of fsIncomeStatementTable[0]"> {{cell}}</th>

                            </tr>
                        </thead>
                        <tbody>
                            <tr *ngFor="let row of fsIncomeStatementTable | slice:1" [ngClass]="{'net-cost': row[0] === incomeStatementStyles[0] || row[0] === incomeStatementStyles[1] || row[0] === incomeStatementStyles[2] || row[0] === incomeStatementStyles[3]}">
                                <td>{{row[0]}}</td>
                                <td *ngFor="let cell of row | slice:1">{{cell | shortAndBlankNumberFormat: 2}}</td>
                            </tr>
                        </tbody>
                    </table>

                </div>
                <!-- Income table -->
                <!-- Cash Table Start-->
                <div *ngIf="selectedFinancialOption===2" id="base-strategy--fs-cashflow" role="tabpanel" aria-labelledby="table-tab" aria-expanded="false">
                    <table class="table">
                        <thead>
                            <tr style="height:50px">
                                <th *ngFor="let cell of fsCashFlowTable[0]"> {{cell}}</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr *ngFor="let row of fsCashFlowTable | slice:1" [ngClass]="{'net-cost': row[0] === cashFlowStyles[0] || row[0] === cashFlowStyles[1]}">
                                <td>{{row[0]}}</td>
                                <td *ngFor="let cell of row | slice:1">{{cell | shortNumberFormat: 2}}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <!-- Cash Table End-->
                <!-- Balance sheet Table Start-->
                <div *ngIf="selectedFinancialOption===3" id="base-strategy--fs-balancesheet" role="tabpanel" aria-labelledby="table-tab" aria-expanded="false">
                    <table class="table">
                        <thead>
                            <tr style="height:50px">
                                <th *ngFor="let cell of fsBalanceSheetTable[0]"> {{cell}}</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr *ngFor="let row of fsBalanceSheetTable | slice:1" [ngClass]="{'net-cost': row[0] === balanceSheetStyles[0] || row[0] === balanceSheetStyles[1] || row[0] === balanceSheetStyles[2] || row[0] === balanceSheetStyles[3]}">
                                <td>{{row[0]}}</td>
                                <td *ngFor="let cell of row | slice:1" >{{cell | shortAndBlankNumberFormat: 2}}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <!-- Balance sheet Table End-->
            </div>

        </div>
    </div>

</div>

我当前的输出

间距

的预期输出

Answer 1

JavaScript可以在设置HTML属性和设置CSS样式方面操纵DOM。如果要直接操作DOM元素，可以使用

在HTML中

<input #box type="text">

在TS

@Viewchild('box') textbox: ElementRef;

但这对于样式和操纵DOM一般来说是一种可怕的方法。如果你需要动态造型，你应该做什么就是这个。 Dynamically updating css in Angular 2。使用angular的强大绑定框架为您完成工作。您想要HTML元素的任何属性更改？然后绑定它。添加css类的一个简单示例是

<div [class.col-6]="occupyHalfTheGrid" [class.col-4]="!occupyHalfTheGrid">

并在您的代码中

occupyHalfTheGrid = true

由于您已经在使用bootstrap，因此您的问题的真正解决方案是使用Bootstrap的网格系统来构建您想要的布局。 https://getbootstrap.com/docs/4.1/layout/grid/ 没有什么可以以编程方式操作静态资产负债表，例如你的。

如果您发现bootstrap的网格不适合您，请使用raw css。 https://www.w3schools.com/css/default.asp

在角度4应用程序中以编程方式引入行之间的间距

1 个答案: