Angular2 How to Repeat a List

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);