以编程方式在 Angular 4 应用程序中引入行间距

Posted 2023-03-06

【中文标题】以编程方式在 Angular 4 应用程序中引入行间距

【英文标题】：pro-grammatically introduce Spacing between rows in angular 4 application

【发布时间】：2018-11-11 06:51:15

【问题描述】：

我正在实现 Angular 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>

我当前的输出

间距方面的预期输出

【参考方案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/ 对于像您这样的静态资产负债表，没有什么可以真正以编程方式操作。

如果您发现引导程序的网格不适合您，只需使用原始 css。 https://www.w3schools.com/css/default.asp