[TOC] >[success] # ngFor 指令 **ngFor 指令** 也就是 **vue** 中的 **v-for** ,写法如下： 1. **普通写法** ~~~ <ul> <li *ngFor="let menu of menus"> <a href="#">{{ menu.title }}</a> </li> </ul> ~~~ 2. 获取 **index索引** 写法 ~~~ <ul> <li *ngFor="let menu of menus; let i=index"> <a href="#">{{ menu.title }}</a> </li> </ul> ~~~ 3. 在 **触发事件** 时获取当前 **是否是第一个元素** 或者 **是否是最后一个元素** ，返回 **布尔值** ~~~ <ul> <li *ngFor="let menu of menus; let first = first; let last = last"> <a href="#">{{ menu.title }}</a> </li> </ul> ~~~ 4. 在 **触发事件** 时获取当前为 **奇偶数** ，也是返回布尔值 ~~~ <ul> <li *ngFor="let menu of menus; let odd = odd; let even = even"> <a href="#">{{ menu.title }}</a> </li> </ul> ~~~ 5. **提升性能** ，**trackBy** 后面可以接一个 **函数** 或者 **表达式** ，它也会返回一个表达式，目前不知道应用场景 ~~~ <ul> <li *ngFor="let menu of menus; trackBy:trackElement"> <a href="#">{{ menu.title }}</a> </li> </ul> ~~~ >[success] # 事件与样式绑定  1. **多个动态class** 就写 **多个[class.类名]** >[success] ## 综合案例 这里 **包括了上述的所有绑定class案例使用方法** **html代码** ~~~ <ul> <li *ngFor="let menu of menus; let i = index; let f= first; let even= even; trackBy: trackByFn" > <a href="#" [class.active]="i == selectedIndex" [class.first]="f" [class.even]="even" (click)="selectedIndex = i">{{ menu.title }}</a> </li> </ul> ~~~ **angular js代码** ~~~ import { Component } from '@angular/core'; // 声明菜单接口 interface TopMenu { title: string; link: string; } @Component({ selector: 'app-root', // 组件名称 templateUrl: './app.component.html', // 组件的页面 styleUrls: ['./app.component.css'], // 组件的样式，可以传入多个css文件 }) // 以下是类似vue的变量跟方法 export class AppComponent { selectedIndex = -1; // 高亮选中的颜色下标 menus:TopMenu[] = [ // 菜单列表 { title:'热门', link: '' }, { title:'男装', link: '' }, { title:'百货', link: '' }, { title:'运动', link: '' }, { title:'手机', link: '' }, { title:'家纺', link: '' }, { title:'食品', link: '' }, { title:'电器', link: '' }, { title:'鞋包', link: '' }, { title:'汽车', link: '' }, { title:'水果', link: '' }, { title:'电脑', link: '' }, { title:'内衣', link: '' }, { title:'家装', link: '' }, { title:'母婴', link: '' }, { title:'美妆', link: '' }, { title:'家具', link: '' }, ] trackByFn(index: number, item: TopMenu): string { // trackBy提升性能的函数 return item.title; } } ~~~ **css 代码** ~~~ ul{ padding: 0; margin: 0; display: flex; } ul li { display: inline-block; margin: 0 5px; white-space: nowrap; } a{ text-decoration: none; } ::-webkit-scrollbar{ display: none; } .active{ color: red; } .first{ color: green; } .even{ color: pink; } ~~~