需求:Angular 6.x中用ngFor指令生成多个标签,想要默认选中第一个标签,并在点击其他标签的时候为对应标签添加选中效果。
代码如下
<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