该指令用于基于可迭代对象中的每一项创建相应的模板。每个实例化模板的上下文对象继承于外部的上下文对象，其值与可迭代对象对应项的值相关联。
NgForOf 指令语法
<li *ngFor="let item of items; index as i; trackBy: trackByFn">...</li>
<li template="ngFor let item of items; index as i; trackBy: trackByFn"></li>
<ng-template
ngFor
let-item
[ngForOf] = "items"
let-i = "index"
let-first = "first"
let-last = "last"
let-odd = "odd"
let-even = "even">
<li>...</li>
</ng-template>
NgForOf 提供了几个导出值，可以将其替换为局部变量：
- $implicit: T - 表示 ngForOf 绑定的可迭代对象中的每一个独立项。
- ngForOf: NgIterable<T> - 表示迭代表达式的值。
- index: number - 表示当前项的索引值。
- first: boolean - 若当前项是可迭代对象的第一项，则返回 true。
- last: boolean - 若当前项是可迭代对象的最后一项，则返回 true。
- even: boolean - 若当前项的索引值是偶数，则返回 true。
- odd: boolean - 若当前项的索引值是奇数，则返回 true。
NgForOF例子
app.component.ts
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
items = [
{name: 'Mahesh', age: '25'},
{name: 'Shakti', age: '23'},
{name: 'Krishna', age: '23'},
{name: 'Radha', age: '21'},
];
}
app.component.html
<ul>
<li *ngFor = "let item of items">{{item.name}}</li>
</ul>
<br>
<ul>
<ng-template
ngFor
let-item
[ngForOf] = "items"
let-i = "index"
let-first = "first"
let-last = "last"
let-odd = "odd"
let-even = "even">
<li>{{item.name}}{{i}}{{first}}{{last}}{{odd}}{{even}}</li>
</ng-template>
</ul>
