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

【问题标题】：Add active class to an element in a ngFor loop before click event is fired在触发单击事件之前，将活动类添加到 ngFor 循环中的元素
【发布时间】：2019-12-18 13:29:58
【问题描述】：

我有一个加载动态“菜单”的简单 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;
}

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

【问题讨论】：

然后将默认特定值设置为 selectedIndex。
import ActivatedRoute from @angular/route 它可以帮助您获取 url 参数。在页面加载时，您应该检查url params 并激活该菜单，而在更改时，您可以应用上述已经正常工作的逻辑。

标签： angular

【解决方案1】：

用索引初始化 selectedIndex

例如，

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

【讨论】：

【解决方案2】：

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

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

【讨论】：