css - 我怎样才能让第一个英雄被选为angular2的初始条件？

Question

在angular2英雄教程中

template: `
<h1>{{title}}</h1>
<h2>My Heroes</h2>
<ul class="heroes">
  <li *ngFor="let hero of heroes"
    [class.selected]="hero === selectedHero"
    (click)="onSelect(hero)">
    <div *ngIf="hero ==heroes[0]"> first hero </div>
    <span class="badge">{{hero.id}}</span> {{hero.name}}
  </li>
</ul>
<hero-detail [hero]="selectedHero"></hero-detail>`

export class AppComponent implements OnInit {
  title = 'Tour of Heroes';
  heroes: Hero[];
  selectedHero: Hero;

  constructor(private heroService: HeroService) { }

  getHeroes(): void {
  this.heroService.getHeroes().then(heroes => this.heroes = heroes);
  }

  ngOnInit(): void {
  this.getHeroes();
  }

  onSelect(hero: Hero): void {
    this.selectedHero = hero;
  }
}

如何在第一次启动时选择第一个英雄元素我想在单击另一个英雄元素时更改 selectedHero

Answer 1

this.heroService.getHeroes().then(heroes => {
  this.heroes = heroes;
  this.selectedHero = this.heroes[0];
});