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包括两个部分：letvariableNameofobject/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|形式
热门推荐
10 恭喜高考完祝福语简短
11 新年祝福语简短的感谢
12 旅游祝福语简短老师发言
13 生日祝福语 简短独特情话
14 庆祝当生日祝福语简短
15 中秋祝福语简短带署名
16 新年公司祝福语简短牛年
17 给孩子开学祝福语简短
18 长辈请客祝福语简短精辟