cargdev/angular
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>
### 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.