html - 在角度 4 中切换三个 div
问题描述
我正在查看在我的 angular 4 应用程序中的三个 div 之间切换。对于以下损益表现金流量表资产负债表,我基本上有三个 div
如果您注意到 ul-li 标记中的锚标记。单击锚标记应显示相应的 div。我已将 href 设置为 href="javascript:void(0); 并尝试基于组件代码上默认设置为 true 的 showTable 变量进行切换。由于某种原因它不起作用。有人可以告诉我我该怎么做去实现它
<div class="card-body">
<ul class="nav nav-pills financial-tab" id="financial-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active" [ngClass]="showTable ? '' : 'active' " id="sincome-tab" data-toggle="pill" href="javascript:void(0);" role="tab" aria-controls="table"
aria-selected="true" (click)="showTable = !showTable">Income Statement</a>
</li>
<li class="nav-item">
<a class="nav-link" [ngClass]="!showTable ? '' : 'active' " id="cash-tab" data-toggle="pill" href="javascript:void(0);" role="tab" aria-controls="chart"
aria-selected="false" (click)="showTable = !showTable">Cash Flow Statement</a>
</li>
<li class="nav-item">
<a class="nav-link" [ngClass]="!showTable ? '' : 'active' " id="balance-tab" data-toggle="pill" href="javascript:void(0);" role="tab" aria-controls="chart"
aria-selected="false" (click)="showTable = !showTable">Balance Sheet</a>
</li>
</ul>
<div class="tab-content Financial-content" id="pills-tabContent">
<!-- Income table -->
<div *ngIf="showTable" 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>
<th></th>
<th>2017</th>
<th>2018</th>
<th>2019</th>
<th>2020</th>
<th>2021</th>
</tr>
</thead>
<tbody>
<tr>
<td>Direct premiums written</td>
<td>33,150,000</td>
<td>33,813,000</td>
<td>35,179,045 </td>
<td>35,882,626 </td>
<td>35,882,626 </td>
</tr>
<tr>
<td>Assumed premiums written</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
</tr>
</tbody>
</table>
</div>
<div *ngIf="showTable" class="tab-pane fade" id="base-strategy--fs-cashflow" role="tabpanel" aria-labelledby="table-tab" aria-expanded="false">
<table class="table">
<thead>
<tr>
<th></th>
<th>2017</th>
<th>2018</th>
<th>2019</th>
<th>2020</th>
<th>2021</th>
</tr>
</thead>
<tbody>
<tr>
<th colspan="6">Cash flows provided (used) by operating</th>
</tr>
<tr>
<td>Premiums Collected -net of ceded premium</td>
<td>33,150,000</td>
<td>33,813,000</td>
<td>35,179,045 </td>
<td>35,882,626 </td>
<td>35,882,626 </td>
</tr>
<tr>
<td>Loss and LAE Paid</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
</tr>
</tbody>
</table>
</div>
<div class="tab-pane fade" id="base-strategy--fs-balancesheet" role="tabpanel" aria-labelledby="table-tab" aria-expanded="false">
<table class="table">
<thead>
<tr>
<th>As of the end of the period</th>
<th>2017</th>
<th>2018</th>
<th>2019</th>
<th>2020</th>
<th>2021</th>
</tr>
</thead>
<tbody>
<tr>
<th colspan="6">Assets</th>
</tr>
<tr>
<td>Cash, Cash Equivalents </td>
<td>18,387,125</td>
<td>33,813,000</td>
<td>35,179,045 </td>
<td>35,882,626 </td>
<td>35,882,626 </td>
</tr>
<tr>
<td>Short Term Investments</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
解决方案
如果您想根据锚点单击显示 div 并切换,请执行以下操作。
displayDivNumber:number;
onAnchorClick(no) {
this.displayDivNumber = no;
}
带有 ngSwitch 的 html
<a (click)= "onAnchorClick(1)"> </a>
<a (click)= "onAnchorClick(2)"> </a>
<a (click)= "onAnchorClick(3)"> </a>
<div [ngSwitch]="displayDivNumber">
<div *ngSwitchCase="1">Tab content 1</div>
<div *ngSwitchCase="2">Tab content 2</div>
<div *ngSwitchCase="3">Tab content 3</div>
</div>
或者如果需要单独打开/关闭可见,那么您应该尝试通过为每个变量创建单独的变量来执行以下操作。
displayDiv1:boolean=true;
displayDiv2:boolean=false;
displayDiv3:boolean=false;
onAnchorClick(no) {
if(no===1) {
displayDiv1 = !displayDiv1;
} else if(no===2) {
displayDiv2 = !displayDiv2;
} else if(no===3) {
displayDiv3 = !displayDiv3;
}
}
html
<a (click)= "onAnchorClick(1)"> </a>
<a (click)= "onAnchorClick(2)"> </a>
<a (click)= "onAnchorClick(3)"> </a>
<div [ngSwitch]="displayDivNumber">
<div *ngIf="displayDiv1">Tab content 1</div>
<div *ngIf="displayDiv2">Tab content 2</div>
<div *ngIf="displayDiv3">Tab content 3</div>
</div>
推荐阅读
- python - Python:银行 ATM 程序
- c# - 如何通过 C Sharp 中的 Graph API 获取 Microsoft 个人资料图片
- javascript - 我们如何从文件中导入一些函数而不是在 NextJs/React 中导入整个文件?
- sql - 使用 Sum() 和 count() 函数的 SQL 查询
- java - Intent.FLAG_ACTIVITY_CLEAR_TOP 不起作用
- jquery - 根据日期坐标绘制动态矩形
- azure-data-factory - 复制数据“存储连接”强制在 ADF 中使用 Blob 存储,而不是 ADLS Gen2
- angular - 使用 CVA 的角度动态 FormArray,未传播子验证
- azure-virtual-machine - Azure VM 上出现意外错误 OutOfMemory,但有大约 47% 的可用内存
- r - 操作重复