include ../_util-fns

:marked
  In this page, you'll expand the Tour of Heroes app to display a list of heroes, and
  allow users to select a hero and display the hero's details.
  
  我们需要管理多个英雄。我们将扩展《英雄指南》应用，让它显示一个英雄列表，
    允许用户选择一个英雄，查看该英雄的详细信息。

  When you're done with this page, the app should look like this <live-example></live-example>.

  当我们完成本章时，应用应该是这样的：<live-example></live-example>。

.l-main-section
:marked
  ## Where you left off

  ## 延续上一步教程

  Before you continue with this page of the Tour of Heroes,
  verify that you have the following structure after [The Hero Editor](./toh-pt1.html) page.
  If your structure doesn't match, go back to that page to figure out what you missed.

  在继续《英雄指南》的第二部分之前，先来检查一下，完成[第一部分](./toh-pt1.html)之后，你是否已经有了如下目录结构。如果没有，你得先回到第一部分，看看错过了哪里。

.filetree
  .file angular-tour-of-heroes
  .children
    .file src
    .children
      .file app
      .children
        .file app.component.ts
        .file app.module.ts
      .file main.ts
      .file index.html
      .file styles.css
      .file systemjs.config.js
      .file tsconfig.json
    .file node_modules ...
    .file package.json
:marked
  ## Keep the app transpiling and running
  
  ## 让应用代码保持转译和运行
  
  Enter the following command in the terminal window:

  在控制台中敲下列命令：

code-example(language="sh" class="code-shell").
  npm start

:marked
  This command runs the TypeScript compiler in "watch mode", recompiling automatically when the code changes.
  The command simultaneously launches the app in a browser and refreshes the browser when the code changes.
  
  这个命令会在“监听”模式下运行TypeScript编译器，当代码变化时，它会自动重新编译。
    同时，该命令还会在浏览器中启动该应用，并且当代码变化时刷新浏览器。

  You can keep building the Tour of Heroes without pausing to recompile or refresh the browser.

  在后续构建《英雄指南》过程中，应用能持续运行，而不用中断服务来编译或刷新浏览器。

.l-main-section
:marked
  ## Displaying heroes
  
  ## 显示我们的英雄
  
  To display a list of heroes, you'll add heroes to the view's template.
  
  要显示英雄列表，我们就要先往视图模板中添加一些英雄。

  ### Create heroes
  
  ### 创建英雄
  
  Create an array of ten heroes.

  我们先创建一个由十位英雄组成的数组。

+makeExample('toh-2/ts/src/app/app.component.ts', 'hero-array', 'src/app/app.component.ts (hero array)')

:marked
  The `HEROES` array is of type `Hero`, the class defined in the previous page.
  Eventually this app will fetch the list of heroes from a web service, but for now
  you can display mock heroes.

  `HEROES`是一个由`Hero`类的实例构成的数组，我们在第一部分定义过它。
  我们当然希望从一个 Web 服务中获取这个英雄列表，但别急，我们得把步子迈得小一点，先用一组模拟出来的英雄。

  ### Expose heroes

  ### 暴露英雄

  Create a public property in `AppComponent` that exposes the heroes for binding.

  我们在`AppComponent`上创建一个公共属性，用来暴露这些英雄，以供绑定。
  
+makeExample('toh-2/ts/src/app/app.component.1.html', 'hero-array-1', 'app.component.ts (hero array property)')

:marked
  The `heroes` type isn't defined because TypeScript infers it from the `HEROES` array.
  
  我们并不需要明确定义`heroes`属性的数据类型，TypeScript 能从`HEROES`数组中推断出来。
  
.l-sub-section
  :marked
    The hero data is separated from the class implementation
    because ultimately the hero names will come from a data service.
    
    英雄的数据从实现类中分离了出来，因为最终，英雄的名字会来自一个数据服务。

:marked
  ### Display hero names in a template
  
  ### 在模板中显示英雄
  
  To display the hero names in an unordered list,
  insert the following chunk of HTML below the title and above the hero details.

  我们还要在模板中创建一个无序列表来显示这些英雄的名字。
  那就在标题和英雄详情之间，插入下面这段 HTML 代码。

+makeExample('toh-2/ts/src/app/app.component.1.html', 'heroes-template-1', 'app.component.ts (heroes template)')(format='.')

:marked
  Now you can fill the template with hero names.

  现在，我们有了一个模板。接下来，就用英雄们的数据来填充它。

  ### List heroes with ngFor
  
  ### 通过 ngFor 来显示英雄列表

  The goal is to bind the array of heroes in the component to the template, iterate over them,
  and display them individually.
  
  我们想要把组件中的`heroes`数组绑定到模板中，迭代并逐个显示它们。

  Modify the `<li>` tag by adding the built-in directive `*ngFor`.

  首先，修改`<li>`标签，往上添加内置指令`*ngFor`。

+makeExample('toh-2/ts/src/app/app.component.1.html', 'heroes-ngfor-1', 'app.component.ts (ngFor)')


.l-sub-section
  :marked
    The (`*`) prefix to `ngFor` is a critical part of this syntax.
    It indicates that the `<li>` element and its children
    constitute a master template.

    `ngFor`的`*`前缀表示`<li>`及其子元素组成了一个主控模板。

    The `ngFor` directive iterates over the component's `heroes` array
    and renders an instance of this template for each hero in that array.

    `ngFor`指令在`AppComponent.heroes`属性返回的`heroes`数组上迭代，并输出此模板的实例。

    The `let hero` part of the expression identifies `hero` as the  template input variable,
    which holds the current hero item for each iteration.
    You can reference this variable within the template to access the current hero's properties.
    
    引号中赋值给`ngFor`的那段文本表示“*从`heroes`数组中取出每个英雄，存入一个局部的`hero`变量，并让它在相应的模板实例中可用*”。

    Read more about `ngFor` and template input variables in the
    [Showing an array property with *ngFor](../guide/displaying-data.html#ngFor) section of the
    [Displaying Data](../guide/displaying-data.html) page and the
    [ngFor](../guide/template-syntax.html#ngFor) section of the
    [Template Syntax](../guide/template-syntax.html) page.

    要学习更多关于`ngFor`和模板输入变量的知识，参见[显示数据](../guide/displaying-data.html)一章的[用*ngFor显示数组属性](../guide/displaying-data.html#ngFor)和
    [模板语法](../guide/template-syntax.html)章的[ngFor](../guide/template-syntax.html#ngFor)。

:marked
  Within the `<li>` tags, add content
  that uses the `hero` template variable to display the hero's properties.

  接着，我们在`<li>`标签中插入一些内容，以便使用模板变量`hero`来显示英雄的属性。

+makeExample('toh-2/ts/src/app/app.component.1.html', 'ng-for', 'app.component.ts (ngFor template)')(format=".")

:marked
  When the browser refreshes, a list of heroes appears.

  当浏览器刷新时，我们就看到了英雄列表。

  ### Style the heroes

  ### 给我们的英雄们“美容”

  Users should get a visual cue of which hero they are hovering over and which hero is selected.
  
  当用户的鼠标划过英雄或选中一个英雄时，我们得让他/她看起来醒目一点。

  To add styles to your component, set the `styles` property on the `@Component` decorator
  to the following CSS classes:

  要想给我们的组件添加一些样式，请把`@Component`装饰器的`styles`属性设置为下列 CSS 类：

+makeExample('toh-2/ts/src/app/app.component.ts', 'styles', 'src/app/app.component.ts (styles)')(format=".")

:marked
  Remember to use the backtick notation for multi-line strings.
  
  注意，我们又使用了反引号语法来书写多行字符串。

  Adding these styles makes the file much longer. In a later page you'll move the styles to a separate file.

  添加这些样式会让此文件变得更长。在后面的章节中，我们将会把这些样式移到单独的文件中去。

  When you assign styles to a component, they are scoped to that specific component.
  These styles apply only to the `AppComponent` and don't affect the outer HTML.
  
  当我们为一个组件指定样式时，它们的作用域将仅限于该组件。
    上面的例子中，这些样式只会作用于`AppComponent`组件，而不会“泄露”到外部 HTML 中。

  The template for displaying heroes should look like this:

  用于显示英雄们的模板应该是这样的：

+makeExample('toh-2/ts/src/app/app.component.1.html', 'heroes-styled', 'src/app/app.component.ts (styled heroes)')(format='.')

.l-main-section
  :marked
    ## Selecting a hero
    
    ## 选择英雄
    
    The app now displays a list of heroes as well as a single hero in the details view. But
    the list and the details view are not connected.
    When users select a hero from the list, the selected hero should appear in the details view.
    This UI pattern is known as "master/detail."
    In this case, the _master_ is the heroes list and the _detail_ is the selected hero.
    
    我们的应用已经有了英雄列表和单个英雄的详情视图。
        但列表和单独的英雄之间还没有任何关联。
        我们希望用户在列表中选中一个英雄，然后让这个被选中的英雄出现在详情视图中。
        这种 UI 布局模式，通常被称为“主从结构”。
        在这个例子中，主视图是英雄列表，从视图则是被选中的英雄。

    Next you'll connect the master to the detail through a `selectedHero` component property,
    which is bound to a click event.
    
    接下来，我们要通过组件中的一个`selectedHero`属性来连接主从视图，它被绑定到了点击事件上。

    ### Handle click events
    
    ### 处理点击事件
    
    Add a click event binding to the `<li>` like this:

    我们再往`<li>`元素上插入一句点击事件的绑定代码：  

  +makeExample('toh-2/ts/src/app/app.component.1.html', 'selectedHero-click', 'app.component.ts (template excerpt)')(format='.')

  :marked
    The parentheses identify the `<li>` element's  `click` event as the target.
    The `onSelect(hero)` expression calls the  `AppComponent` method, `onSelect()`,
    passing the template input variable `hero`, as an argument.
    That's the same `hero` variable you defined previously in the `ngFor` directive.
    
    圆括号标识`<li>`元素上的`click`事件是绑定的目标。
        等号右边的`onSelect(hero)`表达式调用`AppComponent`的`onSelect()`方法，并把模板输入变量`hero`作为参数传进去。
        它是我们前面在`ngFor`指令中定义的那个`hero`变量。
    
  .l-sub-section
    :marked
      Learn more about event binding at the
      [User Input](../guide/user-input.html) page and the
      [Event binding](../guide/template-syntax.html#event-binding) section of the
      [Template Syntax](../guide/template-syntax.html) page.
      
      关于事件绑定的更多内容，参见：
            [用户输入](../guide/user-input.html)页 和
            [模板语法](../guide/template-syntax.html)页的[事件绑定](../guide/template-syntax.html#event-binding)节。

  :marked
    ### Add a click handler to expose the selected hero
    
    ### 添加点击处理器以暴露选中的英雄
    
    You no longer need the `hero` property because you're no longer displaying a single hero; you're displaying a list of heroes.
    But the user will be able to select one of the heroes by clicking on it.
    So replace the `hero` property with this simple `selectedHero` property:

    我们不再需要`AppComponent`的`hero`属性，因为不需要再显示单个的英雄，我们只需要显示英雄列表。但是用户可以点选一个英雄。
    所以我们要把`hero`属性**替换**成`selectedHero`属性。

  +makeExample('toh-2/ts/src/app/app.component.ts', 'selected-hero', 'src/app/app.component.ts (selectedHero)')
  
  :marked
    The hero names should all be unselected before the user picks a hero, so
    you won't initialize the `selectedHero` as you did with `hero`.
    
    在用户选取一个英雄之前，所有的英雄名字都应该是未选中的。所以我们不希望像`hero`一样初始化`selectedHero`变量。

    Add an `onSelect()` method that sets the `selectedHero` property to the `hero` that the user clicks.
    
    现在，**添加一个`onSelect`方法**，用于将用户点击的英雄赋给`selectedHero`属性。
    
  +makeExample('toh-2/ts/src/app/app.component.ts', 'on-select', 'src/app/app.component.ts (onSelect)')(format='.')

  :marked
    The template still refers to the old `hero` property.
    Bind to the new `selectedHero` property instead as follows:

    我们将把所选英雄的详细信息显示在模板中。目前，它仍然引用之前的`hero`属性。
    我们这就修改模板，让它绑定到新的`selectedHero`属性。  
    
  +makeExample('toh-2/ts/src/app/app.component.1.html', 'selectedHero-details', 'app.component.ts (template excerpt)')(format='.')
  
  :marked
    ### Hide the empty detail with ngIf

    ### 使用 ngIf 隐藏空的详情

    When the app loads, `selectedHero` is undefined.
    The selected hero is initialized when the user clicks a hero's name.
    Angular can't display properties of the undefined `selectedHero` and throws the following error,
    visible in the browser's console:

    当应用加载时，我们会看到一个英雄列表，但还没有任何英雄被选中。
    `selectedHero`属性是`undefined`。
    因此，我们会看到浏览器控制台中出现下列错误：

  code-example(format="nocode").
    EXCEPTION: TypeError: Cannot read property 'name' of undefined in [null]

  :marked
    Although `selectedHero.name` is displayed in the template,
    you must keep the hero detail out of the DOM until there is a selected hero.
    
    虽然我们要在模板中显示的是`selectedHero.name`，但在选中了一个英雄之前，我们必须让这些英雄详情留在DOM之外。

    Wrap the HTML hero detail content of the template with a `<div>`.
    Then add the `ngIf` built-in directive and set it to the `selectedHero` property of the component.
    
    我们可以把模板中的英雄详情内容区放在一个`<div>`中。
        然后，添加一个`ngIf`内置指令，把`ngIf`的值设置为组件的`selectedHero`属性。

  +makeExample('toh-2/ts/src/app/app.component.1.html', 'ng-if', 'src/app/app.component.ts (ngIf)')(format='.')

  .alert.is-critical
    :marked
      Don't forget the asterisk (`*`) in front of `ngIf`.
      
      别忘了`ngIf`前的星号 (`*`)。

  :marked
    The app no longer fails and the list of names displays again in the browser.
    
    应用不再出错，而名字列表也再次显示在浏览器中。

  :marked
    When there is no selected hero, the `ngIf` directive removes the hero detail HTML from the DOM.
    There are no hero detail elements or bindings to worry about.
    
    当没有选中英雄时，`ngIf`指令会从 DOM 中移除表示英雄详情的这段 HTML 。
        没有了表示英雄详情的元素，也就不用担心绑定问题。

    When the user picks a hero, `selectedHero` becomes defined and
    `ngIf` puts the hero detail content into the DOM and evaluates the nested bindings.
    
    当用户选取了一个英雄，`selectedHero`变成了“已定义的”值，于是`ngIf`把英雄详情加回 DOM 中，并计算它所嵌套的各种绑定。
    
  .l-sub-section
    :marked
      Read more about `ngIf` and `ngFor` in the
      [Structural Directives](../guide/structural-directives.html) page and the
      [Built-in directives](../guide/template-syntax.html#directives) section of the
      [Template Syntax](../guide/template-syntax.html) page.


      要了解更多`ngIf`，`ngFor`和其它结构型指令的信息，参见
      [结构型指令](../guide/structural-directives.html)和
      [模板语法](../guide/template-syntax.html)章的[内置指令](../guide/template-syntax.html#directives)部分。

  :marked
    ### Style the selected hero
    
    ### 给所选英雄添加样式

    While the selected hero details appear below the list, it's difficult to identify the selected hero within the list itself.
    
    我们在下面的详情区看到了选中的英雄，但是我们还是没法在上面的列表区快速定位这位英雄。

    In the `styles` metadata that you added above, there is a custom CSS class named `selected`.
    To make the selected hero more visible, you'll apply this `selected` class to the `<li>` when the user clicks on a hero name.
    For example, when the user clicks "Magneta", it should render with a distinctive but subtle background color
    like this:

    在我们前面添加的`styles`元数据中，有一个名叫`selected`的自定义CSS类。
    要想让选中的英雄更加醒目，当用户点击一个英雄名字时，我们要为`<li>`添加`selected`类。
    例如，当用户点击“Magneta”时，它应该使用不一样的醒目的背景色。

  figure.image-display
    img(src='/resources/images/devguide/toh/heroes-list-selected.png' alt="选中的英雄")
  :marked
    In the template, add the following `[class.selected]` binding to  the `<li>`:
    
    在这个模板中，往`<li>`上添加一个`[class.selected]`绑定：
  
  +makeExample('toh-2/ts/src/app/app.component.1.html', 'class-selected-1', 'app.component.ts (setting the CSS class)')(format=".")
  
  :marked
    When the expression (`hero === selectedHero`) is `true`, Angular adds the `selected` CSS class.
    When the expression is `false`, Angular removes the `selected` class.
    
    当表达式(`hero === selectedHero`)为`true`时，Angular会添加一个CSS类`selected`。为`false`时则会移除`selected`类。


  .l-sub-section
    :marked
      Read more about the `[class]` binding in the [Template Syntax](../guide/template-syntax.html#ngClass "Template syntax: NgClass") guide.

      关于`[class]`绑定的更多信息，参见[模板语法](../guide/template-syntax.html#ngClass "Template syntax: NgClass")。

  :marked
    The final version of the `<li>` looks like this:
    
  +makeExample('toh-2/ts/src/app/app.component.1.html', 'class-selected-2', 'app.component.ts (styling each hero)')(format=".")

  :marked
    After clicking "Magneta", the list should look like this:

    浏览器重新加载了我们的应用。
    我们选中英雄 Magneta，通过背景色的变化，它被清晰的标记出来。

  figure.image-display
    img(src='/resources/images/devguide/toh/heroes-list-1.png' alt="英雄列表应用的输出")

  :marked
    Here's the complete `app.component.ts` as of now:

    完整的`app.component.ts`文件如下：

  +makeExample('toh-2/ts/src/app/app.component.ts', '', 'src/app/app.component.ts')

.l-main-section
:marked
  ## The road you've travelled
  
  ## 已走的路
  
  Here's what you achieved in this page:
  
  在本章中，我们完成了以下内容：

  * The Tour of Heroes app displays a list of selectable heroes.
  
    我们的《英雄指南》现在显示一个可选英雄的列表
    
  * You added the ability to select a hero and show the hero's details.
  
    我们可以选择英雄，并显示这个英雄的详情
    
  * You learned how to use the built-in directives `ngIf` and `ngFor` in a component's template.
  
    我们学会了如何在组件模板中使用内置的`ngIf`和`ngFor`指令

  Run the <live-example></live-example> for this part.
  
  运行这部分的<live-example></live-example>。

  ### The Road Ahead
  
  ### 前方的路
  
  Our Tour of Heroes has grown, but it’s far from complete.
  We can't put the entire app into a single component.
  We need to break it up into sub-components and teach them to work together
  as we learn in the [next chapter](toh-pt3.html).

  我们的《英雄指南》长大了，但还远远不够完善。
  我们显然不能把整个应用都放进一个组件中。
  我们需要把它拆分成一系列子组件，然后教它们协同工作，
  就像我们将在[下一章](toh-pt3.html)学到的那样。