英雄之旅2

1. 你要先创建一些模拟的英雄数据，并假装它们是从服务器上取到的。创建一个名叫 mock-heroes.ts 的文件。 定义一个包含十个英雄的常量数组 HEROES，并导出它。
   2.要在 HeroesComponent 的顶部显示这个英雄列表。

• 打开 HeroesComponent 类文件，并导入模拟的 HEROES。
• 往类中添加一个 heroes 属性，这样可以暴露出这些英雄，以供绑定。

3. 使用 *ngFor 列出这些英雄
4. 主从结构：当用户在主列表中点击一个英雄时，该组件应该在页面底部显示所选英雄的详情。
5. 添加 click 事件绑定，在html的列表元素中进行绑定。并添加元素的事件
6. 及时修改详情模板 使用 *ngIf 隐藏空白的详情
7. 给所选英雄添加样式
   Angular 的 CSS 类绑定机制让根据条件添加或移除一个 CSS 类变得很容易。 只要把 [class.some-css-class]="some-condition" 添加到你要施加样式的元素上就可以了。

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

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

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

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

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