[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;
}
~~~
- Angular8開發拼多多WebApp
- 框架對比
- 環境搭建與項目創建
- 開發工具配置
- 初始組件
- ngFor指令
- ngIf指令
- 樣式綁定的幾種方式
- 組件生命周期
- 在組件類中引用模版(類似vue 的 ref)
- 雙向綁定
- 什么是模塊
- 【以下目錄未完成】什么是注解(裝飾器)
- 指令的概念
- 組件的事件綁定和樣式綁定
- 組件嵌套和投影組件
- 路由概念
- 路由實戰
- 路由URL和參數
- 管道的概念
- 依賴注入
- 臟值檢測
- HTTP 概覽
- Postman 和 Rest Client 調試 HTTP
- Rest API
- HttpClient 修改
- Http 攔截器 HttpInterceptor
- 其他
- Angular終極課程
- RxJS快速入門