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

另請參見實現angular 2的ngClassEven ngClassOdd