Html 在角度4中切换三个div

我希望在angular 4应用程序中在三个div之间切换。我基本上有以下三个div 损益表 现金流量表 资产负债表

如果您注意到ul-li标签中的锚定标签。单击锚定标记应显示相应的div。我已将href设置为href=javascript:void0；并尝试基于组件代码上默认设置为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>

html

---

您使用同一个showTable字段来控制所有div。创建三个不同的变量，如showIncome、showCashFlow、showBalanceSheet，并分别对其进行更改。所以，您的意思是在组件中有三个布尔变量，当我单击其中一个时，将其设置为true，其余两个设置为false。如果我的理解是错误的，那么你能给我一个例子吗请检查答案提供的解决方案让我知道它对你有用或者你需要其他的东西。你可以创建三个不同的布尔值。我想这就是你想要的。虽然@PranayRana提供的解决方案更好，因为它不允许同时显示两个div。我只是尝试了第二个选项。在调试过程中，我可以看到，例如，当我单击onAnchorClick2时，它会点击方法中的正确开关，尽管div不可见。是不是因为第一个div没有设置为false实际对我有效的是onTabClickno{if no==1{this.showIncomeStatement=true；this.showCashFlow=false；this.showBalanceSheet=false；}否则如果no==2{this.showCashFlow=true；this.showIncomeStatement=false；this.showBalanceSheet=false；}else如果否==3{this.showBalanceSheet=true；this.showCashFlow=false；this.showBalanceSheet=false；}}@汤姆-那么你应该尝试第一种选择，你不需要写这么长的代码..ngswitch为你小心开关

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;
 }
}

<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>