программно ввести расстояние между рядами в угловых 4 приложения

Question

Я использую угловое приложение 4.Я пытаюсь отобразить данные в табличном формате, что я сделал в некоторой степени, но мне нужно ввести интервал в конкретной строке.Например, мне нужно ввести пробел после написания Net Premiums.Возможно, мне придется сделать это на программной основе.Как мне этого добиться.

html code

<!-- 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 может манипулировать DOM с точки зрения настройки свойств HTML и установки стилей CSS.Если вы хотите напрямую управлять элементом DOM, вы можете использовать

В HTML

<input #box type="text">

В TS

@Viewchild('box') textbox: ElementRef;

Но это ужасный подход к стилю иманипулируя DOM в целом.Что вам нужно делать, если вам нужно динамическое моделирование, так это. Динамическое обновление CSS в 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/ На самом деле нет ничего, чтобы программно манипулировать таким статическим балансом, как ваш.

Если вы обнаружите, что сетка начальной загрузки вам не подходит, просто используйте raw css.https://www.w3schools.com/css/default.asp