iSharkFly-Docs
/
angular-docs-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

docs: move text that mention what is expected to fail up higher into the section (#27329) 

PR Close #27329
This commit is contained in:
Vani 2018-11-28 10:03:21 -08:00 committed by Jason Aden
parent e8921365b7
commit 22b89ea58a
1 changed files with 15 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
aio/content/tutorial/toh-pt2.md
View File

@ -37,7 +37,7 @@ In the same file (`HeroesComponent` class), define a component property called `
Open the `HeroesComponent` template file and make the following changes:
* Add an `<h2>` at the top,
* Add an `<h2>` at the top,
* Below it add an HTML unordered list (`<ul>`)
* Insert an `<li>` within the `<ul>` that displays properties of a `hero`.
* Sprinkle some CSS classes for styling (you'll add the CSS styles shortly).
@ -52,14 +52,14 @@ Now change the `<li>` to this:
<code-example path="toh-pt2/src/app/heroes/heroes.component.1.html" region="li">
</code-example>
The [`*ngFor`](guide/template-syntax#ngFor) is Angular's _repeater_ directive.
The [`*ngFor`](guide/template-syntax#ngFor) is Angular's _repeater_ directive.
It repeats the host element for each element in a list.
In this example
* `<li>` is the host element
* `heroes` is the list from the `HeroesComponent` class.
* `hero` holds the current hero object for each iteration through the list.
* `hero` holds the current hero object for each iteration through the list.
<div class="alert is-important">
@ -73,7 +73,7 @@ After the browser refreshes, the list of heroes appears.
### Style the heroes
The heroes list should be attractive and should respond visually when users
The heroes list should be attractive and should respond visually when users
hover over and select a hero from the list.
In the [first tutorial](tutorial/toh-pt0#app-wide-styles), you set the basic styles for the entire application in `styles.css`.
@ -109,7 +109,7 @@ The `heroes.component.css` styles apply only to the `HeroesComponent` and don't
## Master/Detail
When the user clicks a hero in the **master** list,
When the user clicks a hero in the **master** list,
the component should display the selected hero's **details** at the bottom of the page.
In this section, you'll listen for the hero item click event
@ -144,14 +144,12 @@ to the component's `selectedHero`.
### Update the details template
The template still refers to the component's old `hero` property which no longer exists.
The template still refers to the component's old `hero` property which no longer exists.
Rename `hero` to `selectedHero`.
<code-example path="toh-pt2/src/app/heroes/heroes.component.html" region="selectedHero-details" header="heroes.component.html (selected hero details)" linenums="false">
</code-example>
### Hide empty details with _*ngIf_
After the browser refreshes, the application is broken.
Open the browser developer tools and look in the console for an error message like this:
@ -160,23 +158,25 @@ Open the browser developer tools and look in the console for an error message li
HeroesComponent.html:3 ERROR TypeError: Cannot read property 'name' of undefined
</code-example>
Now click one of the list items.
The app seems to be working again.
The heroes appear in a list and details about the clicked hero appear at the bottom of the page.
#### What happened?
When the app starts, the `selectedHero` is `undefined` _by design_.
Binding expressions in the template that refer to properties of `selectedHero` &mdash; expressions like `{{selectedHero.name}}` &mdash; _must fail_ because there is no selected hero.
#### The fix
Now, click one of the list items.
The app seems to be working again.
The heroes appear in a list and details about the clicked hero appear at the bottom of the page.
#### The fix - hide empty details with _*ngIf_
The component should only display the selected hero details if the `selectedHero` exists.
Wrap the hero detail HTML in a `<div>`.
Add Angular's `*ngIf` directive to the `<div>` and set it to `selectedHero`.
<div class="alert is-important">
Don't forget the asterisk (*) in front of `ngIf`. It's a critical part of the syntax.
@ -212,7 +212,7 @@ If the user clicks "Magneta", that hero should render with a distinctive but sub
That _selected hero_ coloring is the work of the `.selected` CSS class in the [styles you added earlier](#styles).
You just have to apply the `.selected` class to the `<li>` when the user clicks it.
The Angular [class binding](guide/template-syntax#class-binding) makes it easy to add and remove a CSS class conditionally.
The Angular [class binding](guide/template-syntax#class-binding) makes it easy to add and remove a CSS class conditionally.
Just add `[class.some-css-class]="some-condition"` to the element you want to style.
Add the following `[class.selected]` binding to the `<li>` in the `HeroesComponent` template:
@ -232,7 +232,7 @@ The finished `<li>` looks like this:
## Final code review
Your app should look like this <live-example></live-example>.
Your app should look like this <live-example></live-example>.
Here are the code files discussed on this page, including the `HeroesComponent` styles.