Bootstrap Registerkarte Inhalt Konflikte mit * ngFor

Question

Ich habe ein paar Probleme mit bootstrap und angular 2 (TS), ich versuche, eine Schaltfläche, die auf mittleren und kleinen Breiten zeigt eine Schaltfläche Fenster und wenn Sie klicken, zeigt eine Liste von populären und kommentierten Nachrichten. Mein erstes Problem ist, dass die Nachrichten immer sichtbar sind, auch wenn die Tabs ausgeblendet sind, und das zweite ist, dass wenn ich auf ein Tab klicke, es nur das erste neue anzeigt.

Button:

<button (click)="showNews()" type="button" class="navbar-toggle pull-right collapsed" data-toggle="collapse" data-target="#popular-news"> 
    <span class="sr-only">Toggle menu</span> 
    <span class="glyphicon glyphicon-th-large"></span> 
    </button> 

Tabs:

<div class="collapse navbar-collapse" id="popular-news"> 
    <ul class="nav navbar-nav nav-tabs"> 
    <li class="active"><a data-toggle="tab" href="#popular">Popular</a></li> 
    <li class=""><a data-toggle="tab" href="#commented">Commented</a></li> 
    </ul> 
    <div #indicator1 class="indicator"></div> 
    <div #indicator2 class="indicator"></div> 
</div> 

Tabs Inhalt:

<section class="best-news tab-content" #bestNews> 
     <div id="popular" *ngFor="let notice of news" class="tab-pane fade in active"> 
     <div class="pnew-img"> 
      <img src="./img/default.png" class="img-responsive"> 
     </div> 
     <div> 
      <p class="pnew-title">{{ notice.noticeTitle}}</p> 
      <span class="glyphicon glyphicon-eye-open"></span> 
     </div> 
     </div> 
     <div id="commented" class="tab-pane fade" *ngFor="let notice of news"> 
     <div class="pnew-img"> 
      <img src="./img/default.png" class="img-responsive"> 
     </div> 
     <div> 
      <p class="pnew-title">{{ notice.noticeTitle }}</p> 
      <span class="glyphicon glyphicon-comment"></span> 
     </div> 
     </div> 
    </section> 

Typoskript Code:

export class HomePageComponent implements OnInit { 
    pageTitle: string = 'Gaming News'; 
    errorMessage: string; 
    news: INews[]; 
    @ViewChild('bestNews')menuNews: ElementRef; 

    constructor(private _newsData: NewsDataService, 
      private elementRef: ElementRef, 
      private renderer: Renderer) {} 

    showNews(): void { 
    this.renderer.setElementClass(this.menuNews, 'best-news-hidden' false); 
    } 

    ngOnInit(): void { 
    this._newsData.getNews() 
     .subscribe(news => this.news = news, 
       error => this.errorMessage = <any>error); 
    } 
} 

Wer kann mir bitte helfen?

Answer 1

Sieht aus wie Sie einige id Probleme mit der Registerkarte Inhalt haben:

<section class="best-news tab-content" #bestNews> 
     <div id="popular" class="tab-pane fade in active"> 
     <div class="pnew-img" *ngFor="let notice of news"> 
      <img src="./img/default.png" class="img-responsive"> 
     </div> 
     <div> 
      <p class="pnew-title">{{ notice.noticeTitle}}</p> 
      <span class="glyphicon glyphicon-eye-open"></span> 
     </div> 
     </div> 
     <div id="commented" class="tab-pane fade"> 
     <div class="pnew-img" *ngFor="let notice of news"> 
      <img src="./img/default.png" class="img-responsive"> 
     </div> 
     <div> 
      <p class="pnew-title">{{ notice.noticeTitle }}</p> 
      <span class="glyphicon glyphicon-comment"></span> 
     </div> 
     </div> 
    </section> 

Ihre *ngFor waren beide auf der <div> tabstopp- gesteuert werden: id="popular" und id="commented". Als das über iteriert wurde, erhalten Sie mehrere "id", die im DOM identisch sind - nicht gut. Ich habe die *ngFor nach unten in den Inhaltsbereich der Baumstruktur in jedem Abschnitt verschoben, was der Registerkarte divs ihre eigene id gibt und die Schleifenanzeige innerhalb dieser div erlaubt. Lassen Sie mich wissen, wenn Sie tatsächlich die Tab-Divs benötigen, die überschliffen werden sollen.