angular重要指令ngfor

通过一个顶部导航栏看下一ngfor的使用。上代码

ngfor指令 可以拿到menus中的 index索引 是否为第一个 是否为最后一个 上述代码我们给第一个 最后一个 选中分别给3种样式

.active {color: red;
}
.first{color: blue;
}
.final{color: yellow;
}

效果如下

 menus中的数据如下

  selectedIndex = -1;menus: TopMenu[] = [{title: '热门',link: ''},{title: '男装',link: ''},{title: '百货',link: ''},{title: '运动',link: ''},{title: '手机',link: ''},{title: '家纺',link: ''},{title: '食品',link: ''},{title: '电器',link: ''},];

完整demo可参考github自行下载

https://github.com/lee727n/angularLearning


本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部