ngFor与列表标签选中效果

需求：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>

说明

  1. this.pointer初始值为0，指向列表收个标签
  2. css选择器为.selected添加选中效果
  3. changePointer()改变this.pointer的值
  4. 参考：NgForOfContext
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容