原文鏈接：這里
0.前言
在HTML中經常需要遍歷文件，angular中自帶的for語法 *ngFor ，這篇文章中主要介紹 *ngFor的用法。
1.用法介紹
HTML：
<p>基礎用法</p>
<div *ngFor="let item of student1">
{{item}}
</div>
<p>帶索引</p>
<div *ngFor="let item of student1 let i = index">
<li>{{i}}</li>
<li>{{item}}</li>
</div>
<p>其他寫法(奇偶、首尾)</p>
<div *ngFor="let item of student1 let odd=odd let even=even let first=first let last =last">
<li>{{odd}}</li>
<li>{{item}}</li>
</div>
<p>json格式</p>
<div *ngFor="let item of student2">
<li>{{item.id}}</li>
<li>{{item.name}}</li>
</div>
TS：
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-menu',
templateUrl: './menu.component.html',
styleUrls: ['./menu.component.scss']
})
export class MenuComponent implements OnInit {
student1=[ '張三','李四','王五','趙六']
student2=[
{id:1 , name:'張三'},
{id:2 , name:'李四'},
{id:3 , name:'王五'},
{id:4 , name:'趙六'},
]
constructor() {
}
ngOnInit(): void {
}
}
運行效果：
