` 上的 `hero` 对象传给它，这个 `hero` 也就是以前在 `*ngFor` 表达式中定义的那个。",
+ "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt2.md"
+ },
+ {
+ "original": "### Add the click event handler",
+ "translation": "### 添加 `click` 事件处理器",
+ "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt2.md"
+ },
+ {
+ "original": "Rename the component's `hero` property to `selectedHero` but don't assign it.\nThere is no _selected hero_ when the application starts.",
+ "translation": "把该组件的 `hero` 属性改名为 `selectedHero`，但不要为它赋值。\n因为应用刚刚启动时并没有*所选英雄*。",
+ "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt2.md"
+ },
+ {
+ "original": "Add the following `onSelect()` method, which assigns the clicked hero from the template\nto the component's `selectedHero`.",
+ "translation": "添加如下 `onSelect()` 方法，它会把模板中被点击的英雄赋值给组件的 `selectedHero` 属性。",
+ "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt2.md"
+ },
+ {
+ "original": "### Update the details template",
+ "translation": "### 修改详情模板",
+ "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt2.md"
+ },
+ {
+ "original": "The template still refers to the component's old `hero` property which no longer exists. \nRename `hero` to `selectedHero`.",
+ "translation": "该模板引用的仍然是老的 `hero` 属性，但它已经不存在了。\n把 `hero` 改名为 `selectedHero`。",
+ "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt2.md"
+ },
+ {
+ "original": "### Hide empty details with _*ngIf_",
+ "translation": "### 使用 `*ngIf` 隐藏空白的详情",
+ "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt2.md"
+ },
+ {
+ "original": "After the browser refreshes, the application is broken.",
+ "translation": "刷新浏览器，应用挂了。",
+ "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt2.md"
+ },
+ {
+ "original": "Open the browser developer tools and look in the console for an error message like this:",
+ "translation": "打开浏览器的开发者工具，它的控制台中显示出如下错误信息：",
+ "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt2.md"
+ },
+ {
+ "original": "Now click one of the list items.\nThe app seems to be working again.\nThe heroes appear in a list and details about the clicked hero appear at the bottom of the page.",
+ "translation": "现在，从列表中随便点击一个条目。\n应用又正常了。\n英雄们显示在列表中，并且所点英雄的详情也显示在了页面的下方。",
+ "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt2.md"
+ },
+ {
+ "original": "#### What happened?",
+ "translation": "#### 怎么回事？",
+ "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt2.md"
+ },
+ {
+ "original": "When the app starts, the `selectedHero` is `undefined` _by design_.",
+ "translation": "当应用启动时，`selectedHero` 是 `undefined`，*设计如此*。",
+ "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt2.md"
+ },
+ {
+ "original": "Binding expressions in the template that refer to properties of `selectedHero` — expressions like `{{selectedHero.name}}` — _must fail_ because there is no selected hero.",
+ "translation": "但模板中的绑定表达式引用了 `selectedHero` 的属性（表达式为`{{selectedHero.name}}`），这必然会失败，因为你还没选过英雄呢。",
+ "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt2.md"
+ },
+ {
+ "original": "#### The fix",
+ "translation": "#### 修复",
+ "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt2.md"
+ },
+ {
+ "original": "The component should only display the selected hero details if the `selectedHero` exists.",
+ "translation": "该组件应该只有当 `selectedHero` 存在时才显示所选英雄的详情。",
+ "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt2.md"
+ },
+ {
+ "original": "Wrap the hero detail HTML in a `