[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; } ~~~