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

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

Browse Source 
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

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

@ -150,8 +150,6 @@ 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 path="toh-pt2/src/app/heroes/heroes.component.html" region="selectedHero-details" header="heroes.component.html (selected hero details)" linenums="false">
</code-example> </code-example>
### Hide empty details with _*ngIf_
After the browser refreshes, the application is broken. After the browser refreshes, the application is broken.
Open the browser developer tools and look in the console for an error message like this: 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 HeroesComponent.html:3 ERROR TypeError: Cannot read property 'name' of undefined
</code-example> </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? #### What happened?
When the app starts, the `selectedHero` is `undefined` _by design_. 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. 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. The component should only display the selected hero details if the `selectedHero` exists.
Wrap the hero detail HTML in a `<div>`. Wrap the hero detail HTML in a `<div>`.
Add Angular's `*ngIf` directive to the `<div>` and set it to `selectedHero`. Add Angular's `*ngIf` directive to the `<div>` and set it to `selectedHero`.
<div class="alert is-important"> <div class="alert is-important">
Don't forget the asterisk (*) in front of `ngIf`. It's a critical part of the syntax. Don't forget the asterisk (*) in front of `ngIf`. It's a critical part of the syntax.