ngFor

form1.component.ts：

import { Component } from '@angular/core';

// Defines example component and associated template
@Component({
    selector: 'example',
    template: `
      <div *ngFor="let f of fruit"> {{f}} </div>
      <select required>
        <option *ngFor="let f of fruit" [value]="f"> {{f}} </option>
      </select>
    `
})

// Create a class for all functions, objects, and variables
export class ExampleComponent { 
    // Array of fruit to be iterated by *ngFor
    fruit = ['Apples', 'Oranges', 'Bananas', 'Limes', 'Lemons'];
}

输出：

<div>Apples</div>
<div>Oranges</div>
<div>Bananas</div>
<div>Limes</div>
<div>Lemons</div>
<select required>
  <option value="Apples">Apples</option>
  <option value="Oranges">Oranges</option>
  <option value="Bananas">Bananas</option>
  <option value="Limes">Limes</option>
  <option value="Lemons">Lemons</option>
</select>

最简单的形式，*ngFor 有两个部分： let variableName of object/array

在 fruit = ['Apples', 'Oranges', 'Bananas', 'Limes', 'Lemons']; 的情况下，

苹果，橘子等是数组 fruit 中的值。

[value]="f" 将等于*ngFor 迭代过的每个当前 fruit（f）。

与 AngularJS 不同，Angular2 没有继续使用 ng-options 用于 <select> 和 ng-repeat 用于所有其他一般重复。

*ngFor 与 ng-repeat 非常相似，语法略有不同。

参考文献：

Angular2 | 显示数据

Angular2 | ngFor

Angular2 | 形式