Angular 4.x NgForOf

该指令用于基于可迭代对象中的每一项创建相应的模板。每个实例化模板的上下文对象继承于外部的上下文对象，其值与可迭代对象对应项的值相关联。

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>