angular-docs-cn/public/docs/_examples/displaying-data/ts/app/app.component.ts

// #docplaster
// #docregion final
// #docregion imports
import {Component} from 'angular2/core';
// #enddocregion imports
import {Hero} from './hero';

@Component({
  selector: 'my-app',
  template: `
  <h1>{{title}}</h1>
  <h2>My favorite hero is: {{myHero.name}}</h2>
  <p>Heroes:</p>
  <ul>
    <li *ngFor="#hero of heroes">
      {{ hero.name }}
      </li>
  </ul>
  // #docregion message
  <p *ngIf="heroes.length > 3">There are many heroes!</p>
  // #enddocregion message
`
})

export class AppComponent {
  title = 'Tour of Heroes';
  heroes = [
    new Hero(1, 'Windstorm'),
    new Hero(13, 'Bombasto'),
    new Hero(15, 'Magneta'),
    new Hero(20, 'Tornado')
  ];
  myHero = this.heroes[0];
}