Angular 4.x NgForOf

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

NgForOf 指令语法

...



  
...

NgForOf 提供了几个导出值，可以将其替换为局部变量：

• $implicit: T - 表示 ngForOf 绑定的可迭代对象中的每一个独立项。
• ngForOf: NgIterable - 表示迭代表达式的值。
• 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

    
{{item.name}}







    
        
{{item.name}}{{i}}{{first}}{{last}}{{odd}}{{even}}