在触发click事件之前，将活动类添加到ngFor循环中的元素

Question

我有一个简单的ngFor循环，可以加载动态的“菜单”

component.html：

<ul class="nav-series">
    <li *ngFor="let seriesItem of seriesList, let i = index" [class.active]='selectedIndex === i'>
        <a (click)="[selectVehicles(seriesItem.seriesGroup), setIndex(i)]">{{ seriesItem.seriesGroup }}</a>
    </li>
</ul>

component.ts：

setIndex(index: number) {
    this.selectedIndex = index;
}

这一切正常，并将活动类添加到单击的项目。但是我想要的是在单击之前将活动的类默认应用于循环中的特定项目。

Answer 1

使用索引初始化selectedIndex

例如，

public selectedIndex = 0; (Will highlight the first element)

Answer 2

在ngOnInit中添加this.selectedIndex = seriesList [0]; 这会将您的selectedIndex设置为数组的第一个元素，并且将应用类。基本上，默认情况下，它将从数组中选择第一个元素

ngOnInit(){
 this.selectedIndex= seriesList[0];
}