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