Angular 2 * ngFor

示例

form1.component.ts：

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

// 定义示例组件和关联的模板
@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>
    `
})

// 为所有函数，对象和变量创建一个类
export class ExampleComponent { 
    // * 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'];，

Apple，Oranges等是array内的值fruit。

[value]="f"将等于已迭代的每个电流fruit（f）*ngFor。

与AngularJS不同，Angular2并未继续使用ng-optionsfor<select>和ng-repeatfor所有其他常规重复。

*ngForng-repeat与语法略有不同非常相似。

参考文献：

Angular2 | 显示数据

Angular2 | ngFor

Angular2 | 形式