0

Verwendung Ich möchte ngIf verwenden, um eine Komponente wie dies zu zeigen: Ich erscheint meine Komponente nicht sehencmponents innen ngIf in Angular 2.

 <ul class="nav nav-tabs"> 
     <li (click)="resetTab(1)" [ngClass]="{'active': first}" id="active"><a>Tab 1</a></li> 
     <li (click)="resetTab(2)" [ngClass]="{'active': second}" ><a>Tab 2</a></li> 
     </ul> 

     <div class="tab-content"> 
     <div *ngIf="first" class="tab-pane fade in active"> 
     Content of tab 1 
     </div> 
     <div *ngIf="second" class="tab-pane fade"> 
      Content of tab 2: 
      <events-list></events-list> 
     </div> 
     </div> 

jedoch aus irgendeinem Grund, wenn Registerkarten (Tabs selbst gerade schalten Schalt fein)

Code Meine Komponente:

resetTab(tab: number) { 
    this.first = (tab == 1) ? true : false; 
    this.second = (tab == 2) ? true: false; 
    } 
+1

Welche Registerkarte Komponente verwenden Sie? –

+0

@ GünterZöchbauer Ich benutze Bootstrap um Tabs zu erstellen. Und Event-Liste ist nur meine Kosten-Komponente, die gut ohne 'ngif angezeigt wird. –

+0

Verwenden Sie https://github.com/ng-bootstrap/ng-bootstrap oder http://valor-software.com/ng2-bootstrap/ oder einfachen Bootstrap? –

Antwort

0

ich das Menü für die Sidebar versuchen und arbeiten diese Sie können feine versuchen: in html

<div class="sidebar-category"> 
     <ul class="nav nav-pills nav-stacked"> 
      <li [class.active]="panelshow == 'tab1'"> 
      <a (click)="setPanel('tab1')">Tab1</a> 
      </li> 
      <li [class.active]="panelshow == 'tab2'"> 
      <a (click)="setPanel('tab2')">Tab2</a> 
      </li> 
     </ul> 
</div> 
<div *ngIf="panelshow == 'tab1'"> 
</div> 
<div *ngIf="panelshow == 'tab2'"> 
</div> 

und in der Komponente:

public panelshow:string; 

    private setPanel(name) { 
    this.panelshow = name; 
}