角度2 - コンポーネント変数に応じたリストアイテムの属性

Question

アイテムのリストがあります。ページがロードされると、最初のアイテムがアクティブになります。

<li *ngFor="let link of links; let i = index;" (click)="setActive(i)" class="{i === activeIndex ? 'active' : ''}"> 
    <a routerLink="{{link.url}}">{{link.text}}</a> 
</li> 

とクラスがこの

export class NavbarComponent{ 
    private links: Array<Object>; 
    private activeIndex: number = 0; 

    constructor(private linksService: LinksService) { 
     this.links = linksService.getNavLinks(); 
    } 

    setActive(index: number) { 
     this.activeIndex = index; 
    } 
} 

リスト項目がそれをクリックする上で正しくアクティブになるように見えます。しかし、ページが読み込まれていないとき。私は何の間違いをしていますか？

Answer 1

あなたはngForによって提供さfirst変数を使用してクラスを削除/を設定するために結合[class.xxx]="..."を使用することができます：あなたが削除する場合

<li *ngFor="let link of links; let i = index" 
    [class.active]="activeIndex == i" 
    (click)="setActive(i)"> 
    <a routerLink="{{link.url}}">{{link.text}}</a> 
</li> 

は `` {{}}もImplementing ngClassEven ngClassOdd for angular 2