ブートストラップタブの内容が* ngForと矛盾しています

Question

ブートストラップとアングル2（TS）に問題があります。中くらいの小さな幅でウィンドウのボタンが表示され、クリックするとリストが表示されます人気のあるコメント付きのニュースの私の最初の問題は、タブが隠されていても常にニュースが見えることです。もう1つはタブをクリックすると最初の新しいものだけが表示されることです。

ボタン：

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

タブ：

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

タブ内容：

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

活字体コード：

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

誰もが私を助けてくださいことができますか？

Answer 1

はあなたのタブのコンテンツといくつかのIDの問題を持っているように見える：

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

あなた*ngForタブが制御されている<div>の両方であった。id="popular"とid="commented"。それが繰り返されると、DOM内で同じである複数の "id"が得られます。いいえ。 *ngForを各セクションのツリーのコンテンツ領域に移動しました。これにより、タブ制御divがそれぞれidになり、そのdiv内でループ表示が可能になりました。実際にタブdivをループする必要があるかどうかを教えてください。