angular重要指令ngfor

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

<ul>
  <li *ngFor="let menu of menus; let i = index let one = first let final = last">
    <a href="#" [class.active]="i === selectedIndex" [class.first]='one' [class.final]='final'
      (click)="selectedIndex = i">
      {{ menu.title }}
    </a>
  </li>
</ul>

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