Angular 4中三个Div切换功能失效的解决方案求助

我来帮你搞定这个标签切换的问题～你现在的核心问题是只用了一个布尔变量showTable来控制三个不同表格的显示，这显然没法区分三个独立的标签状态——当前逻辑会导致前两个表格同时显示/隐藏，而第三个表格因为没加*ngIf会一直显示，完全达不到预期的切换效果。

我给你调整成用字符串变量存储当前激活标签的方案，这样就能精准控制每个标签的显示和激活状态了：

第一步：修改组件逻辑 #

在你的组件类里，把原来的showTable替换成一个存储当前激活标签的变量，默认设为利润表：

export class YourComponent {
  // 默认激活利润表
  activeTab: string = 'income';
}

第二步：更新模板代码 #

把导航栏和表格区域的代码改成下面这样，每个链接点击时设置对应的activeTab值，表格区域根据activeTab判断是否显示：

<div class="card-body">
  <ul class="nav nav-pills financial-tab" id="financial-tab" role="tablist">
    <li class="nav-item">
      <a 
        class="nav-link" 
        [ngClass]="{'active': activeTab === 'income'}" 
        id="sincome-tab" 
        data-toggle="pill" 
        href="javascript:void(0);" 
        role="tab" 
        aria-controls="table" 
        aria-selected="{{activeTab === 'income'}}"
        (click)="activeTab = 'income'"
      >
        Income Statement
      </a>
    </li>
    <li class="nav-item">
      <a 
        class="nav-link" 
        [ngClass]="{'active': activeTab === 'cash'}" 
        id="cash-tab" 
        data-toggle="pill" 
        href="javascript:void(0);" 
        role="tab" 
        aria-controls="chart" 
        aria-selected="{{activeTab === 'cash'}}"
        (click)="activeTab = 'cash'"
      >
        Cash Flow Statement
      </a>
    </li>
    <li class="nav-item">
      <a 
        class="nav-link" 
        [ngClass]="{'active': activeTab === 'balance'}" 
        id="balance-tab" 
        data-toggle="pill" 
        href="javascript:void(0);" 
        role="tab" 
        aria-controls="chart" 
        aria-selected="{{activeTab === 'balance'}}"
        (click)="activeTab = 'balance'"
      >
        Balance Sheet
      </a>
    </li>
  </ul>
  <div class="tab-content Financial-content" id="pills-tabContent">
    <!-- Income table -->
    <div 
      *ngIf="activeTab === 'income'" 
      class="tab-pane fade"
      [ngClass]="{'active show': activeTab === 'income'}"
      id="base-strategy--fs-statement" 
      role="tabpanel" 
      aria-labelledby="table-tab" 
      aria-expanded="{{activeTab === 'income'}}"
    >
      <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>
    <!-- Cash Flow table -->
    <div 
      *ngIf="activeTab === 'cash'" 
      class="tab-pane fade"
      [ngClass]="{'active show': activeTab === 'cash'}"
      id="base-strategy--fs-cashflow" 
      role="tabpanel" 
      aria-labelledby="table-tab" 
      aria-expanded="{{activeTab === 'cash'}}"
    >
      <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>
    <!-- Balance Sheet table -->
    <div 
      *ngIf="activeTab === 'balance'" 
      class="tab-pane fade"
      [ngClass]="{'active show': activeTab === 'balance'}"
      id="base-strategy--fs-balancesheet" 
      role="tabpanel" 
      aria-labelledby="table-tab" 
      aria-expanded="{{activeTab === 'balance'}}"
    >
      <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>

关键调整点说明 #

• 用activeTab字符串变量代替布尔值，精准区分三个标签状态
• 每个导航链接的active类由activeTab的值判断，点击时更新activeTab
• 每个表格区域通过*ngIf控制显示，同时用[ngClass]添加active show类来匹配Bootstrap的tab样式
• 修复了原代码中第三个表格没有显示控制的问题

这样修改后，点击不同的导航标签就能准确切换对应的财务报表了～

内容的提问来源于stack exchange，提问作者Tom