각도 2 - 구성 요소 변수에 따른 목록 항목의 속성

Question

항목 목록이 있고 페이지가로드 될 때 첫 번째 항목이 활발하게 보이길 원합니다. 이

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

목록 항목을 클릭 제대로 활성화되어 같은

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

가와 클래스 보인다. 하지만 페이지가로드 될 때가 아닙니다. 내가 실수 한거야?

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