需求:Angular 6.x中用ngFor指令生成多個標簽,想要默認選中第一個標簽,并在點擊其他標簽的時候為對應標簽添加選中效果。
牛客網導航標簽效果.png
代碼如下
<nav>
<li *ngFor='let item of list; let i = index;' [class.selected]='pointer === i'>
<a (click)='changePointer(i)'>{{ item.name }}</a>
</li>
</nav>
說明
- this.pointer初始值為0,指向列表收個標簽
- css選擇器為.selected添加選中效果
- changePointer()改變this.pointer的值
- 參考:NgForOfContext