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|形式