Angular(7) - 显示英雄详情 - 官方教程英雄指南之详情区域 （详细解说）

1 添加详情区域，组件的模板中有一个列表。要想点击列表中的一个英雄，并显示该英雄的详情，你需要在模板中留一个区域，用来显示这些详情

heroes.component.html

<h2>{{selectedHero.name | uppercase}} Details</h2>
<div><span>id: </span>{{selectedHero.id}}</div>
<div>
  <label>name:
    <input [(ngModel)]="selectedHero.name" placeholder="name"/>
  </label>
</div>

2 修改选中事件

heroes.component.html

<li *ngFor="let hero of heroes" (click)="onSelect(hero)">

3 增加选中事件的后台代码

heroes.component.ts

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

4 打开浏览器的console,发现有error

5 怎么回事？

当应用启动时，selectedHero 是 undefined，设计如此。
但模板中的绑定表达式引用了 selectedHero 的属性（表达式为 {{selectedHero.name}}），这必然会失败，因为你还没选过英雄呢。

6 使用*ngIf来处理空的情况, 在div后面增加判断

src/app/heroes/heroes.component.htm

<div *ngIf="selectedHero">

  <h2>{{selectedHero.name | uppercase}} Details</h2>
  <div><span>id: </span>{{selectedHero.id}}</div>
  <div>
    <label>name:
      <input [(ngModel)]="selectedHero.name" placeholder="name"/>
    </label>
  </div>

</div>

总结

• 英雄指南应用在一个主从视图中显示了英雄列表。

• 用户可以选择一个英雄，并查看该英雄的详情。

• 你使用 *ngFor 显示了一个列表。

• 你使用 *ngIf 来根据条件包含或排除了一段 HTML。

• 你可以用 class 绑定来切换 CSS 的样式类。