从英雄列表中选择英雄并在详情中显示

Author: CarolSum

src/app/app.component.js

@@ -18,21 +18,25 @@ const HEROES: Hero[] = [
   { id: 20, name: 'Tornado' }
 ];
 
+
+
 @Component({
   selector: 'my-app',
   template: `
   <h1>{{title}}</h1>
   <h2>My Heroes</h2>
   <ul class="heroes">
-    <li *ngFor="let hero of heroes">
+    <li *ngFor="let hero of heroes" (click)="onSelect(hero)" [class.selected]="hero === selectedHero">
       <span class="badge">{{hero.id}}</span> {{hero.name}}
     </li>
   </ul>
-  <h2>{{hero.name}} details!</h2>
-  <div><label>id: </label>{{hero.id}}</div>
-  <div>
-    <label>name: </label>
-    <input [(ngModel)]="hero.name" placeholder="name">
+  <div *ngIf="selectedHero">
+    <h2>{{selectedHero.name}} details!</h2>
+    <div><label>id: </label>{{selectedHero.id}}</div>
+    <div>
+      <label>name: </label>
+      <input [(ngModel)]="selectedHero.name" placeholder="name">
+    </div>
   </div>
   `,
   styles: [`
@@ -88,9 +92,9 @@ const HEROES: Hero[] = [
 
 export class AppComponent  { 
   title = 'Tour of Heroes';
-  hero: Hero = {
-    id: 1,
-    name: 'Windstorm'
-  } ;
+  selectedHero: Hero;
   heroes = HEROES;
+  onSelect(hero: Hero): void{
+    this.selectedHero = hero;
+  }
 }