angular从0到1：*ngFor的基础用法
原文链接：这里
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 {
}
}
运行效果：
