1 import directive [For]
import {Component, Template, bootstrap, For} from ‘angular2/angular2‘;
it is important
2 define your list
class MyApp {
constructor() {
this.myName = ‘Jackey‘;
this.myFriends = [
{name: ‘Jackey1‘, age: 25},
{name: ‘Jackey2‘, age: 26}
];
}
}
3 repeat you list to UI
@Template({
inline: ‘<h1>{{myName}}</h1>‘ +
‘<ul>‘ +
‘<li *for="#friend of myFriends">{{friend.name}} {{friend.age}}</li>‘ +
‘</ul>‘,
directives: [For]
})
USE *for="#xx of XXX" .. REMEMBER to inject [for] directive
4 the whole page code:
import {Component, Template, bootstrap, For} from ‘angular2/angular2‘;
@Component({
selector: ‘my-app‘
})
@Template({
inline: ‘<h1>{{myName}}</h1>‘ +
‘<ul>‘ +
‘<li *for="#friend of myFriends">{{friend.name}} {{friend.age}}</li>‘ +
‘</ul>‘,
directives: [For]
})
class MyApp {
constructor() {
this.myName = ‘Jackey‘;
this.myFriends = [
{name: ‘Jackey1‘, age: 25},
{name: ‘Jackey2‘, age: 26}
];
}
}
bootstrap(MyApp);
原文：http://www.cnblogs.com/lihaozhou/p/4663024.html