タブ - タブがクリックされた後にアクティブなプロパティがすべてのタブに残る

Question

あなたの誰かがこの問題を解決するのに役立つなら、タブがアクティブなままであり、私にはわからない理由があります。ここで

htmlです：

<div *ngIf="display === 'edit'" class="panel with-nav-tabs panel-default animated "> 
 
    
 

 
    <div *ngIf="!isCollapsed" class="animated fadeIn " id="details"> 
 
    <form [formGroup]="serverForm" (ngSubmit)="onSubmit()" novalidate> 
 
     <div class="tabbable tabs-below"> 
 
     <div class="tab-content" style="min-height: 240px;"> 
 
\t \t 
 
      <!--Begin Server Tab--> 
 
      <div class="tab-pane active col-md-12" [id]="'serverTab' + sectionId"> 
 
      <div class="col-md-6" style="display: inline-block; float: left;">    
 
      </div> 
 
\t \t <!--End Server Tab--> 
 

 
      <!--Begin Address Tab--> 
 
      <div *ngIf="companySites.length > 0" class="tab-pane fade col-md-12" [id]="'addressTab' + sectionId">    
 
      </div> 
 
      <!--End Address Tab--> 
 

 
      <!--Begin Discount Tab--> 
 
      <div *ngIf="selectedQuoteCenterCode.length > 0"  class="tab-pane fade col-md-12" [id]="'discountTab' + sectionId"> 
 
      
 
      </div> 
 
      <!--End Discount Tab--> 
 

 
      <!--Begin Concurrency Tab--> 
 
      <div *ngIf="companySites.length > 0" class="tab-pane fade col-md-12" [id]="'concurrencyTab' + sectionId"> 
 
       
 
      </div> 
 
      <!--End Concurrency Tab--> 
 

 
      <!--Begin View Tab--> 
 
      <div class="tab-pane fade col-md-12" [id]="'viewTab' + sectionId"> 
 
       View Tab 
 
      </div> 
 
      <!--End View Tab--> 
 
\t \t 
 
     </div> 
 
     </div> 
 
     <ul class="nav nav-tabs"> 
 
     <li class="active"><a [href]="'#serverTab' + sectionId" data-toggle="tab">Server</a></li> 
 
     <li [ngClass]="sectionAddressClass" ><a [href]="'#addressTab' + sectionId" data-toggle="tab">Address</a></li> 
 
     <li [ngClass]="sectiondiscountClass" ><a [href]="'#discountTab' + sectionId" data-toggle="tab">Discount</a></li> 
 
     <li [ngClass]="sectionConcurrencyClass" ><a [href]="'#concurrencyTab' + sectionId" data-toggle="tab">Concurrency</a></li> 
 
     <li><a [href]="'#viewTab' + sectionId" data-toggle="tab">Quotes View</a></li> 
 
     </ul> 
 
    </form> 
 
    </div> 
 
</div>

あなたが角度4を使用して任意の詳細

が必要な場合は、私に教えてください。このタブセットがネストされています別のタブ内

Answer 1

これで問題は解決しました。アクティブプロパティが配置された場所、リンク自体に配置されている必要があります。

あなたがこの問題に遭遇した場合：

<ul class="nav nav-tabs"> 
    <li class="nav-item"><a class="nav-link active" [href]="'#serverTab' + sectionId" data-toggle="tab">Server</a></li> 
    <li [ngClass]="sectionAddressClass" ><a class="nav-link" [href]="'#addressTab' + sectionId" data-toggle="tab">Address</a></li> 
    <li [ngClass]="sectiondiscountClass" ><a class="nav-link" [href]="'#discountTab' + sectionId" data-toggle="tab">Discount</a></li> 
    <li [ngClass]="sectionConcurrencyClass" ><a class="nav-link" [href]="'#concurrencyTab' + sectionId" data-toggle="tab">Concurrency</a></li> 
    <li class="nav-item"><a class="nav-link" [href]="'#viewTab' + sectionId" data-toggle="tab">Quotes View</a></li> 
    </ul>