[Angular 2] 3. RC7: *ngfor

Heros.ts:

Import {Component} from "@angular/core"; Const Heroes=[{ID:1, Name: ' Superman '}, {ID:2, Name: ' Batman '}, {ID:5, Name: ' Batgirl '}, {ID:3, Name: ' Robin '}, {ID:4, Name: ' Flash '}]; @Component ({selector:' Heroes ', Styleurls: [' Heroes.component.css '], Template: '<table> <thead> <th>Name</th> <th>Index</th> </ Thead> <tbody> &LT;TR *ngfor="Let hero of heroes; let i = index;             Trackby: Trackby (Hero); Let Iseven=even; Let Isfirst=first; Let Islast=last;"[Ngclass]= "{' Even ': IsEven, ' first ': IsFirst, ' last ': Islast}" > <td>{{hero.name}}</td> <td>{{i}}</td> </tr> </tbody> </table>`}) Export Class Heroes {Heroes=heroes; Trackby (Hero) {returnHero?hero.id:undefined; }}

Here we can also use:

Trackby:hero?. Id

HEROES.COMPONENT.CSS:

. Even {    background: lightgray;} . First {    font-weight: bold;} . Last {    color: White;     background: black;}

[Angular 2] 3. RC7: *ngfor