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

您可以使用first提供的ngFor变量，并使用[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

Angular 2 - 根据组件变量

1 个答案: