docs(aio): document the non-null assertion operator
This commit is contained in:
parent
75a311f250
commit
74673545c0
|
@ -803,6 +803,15 @@ The null hero's name is {{nullHero && nullHero.name}}
|
|||
<!-- #enddocregion safe-6 -->
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<!-- #docregion non-null-assertion-1 -->
|
||||
<!--No hero, no text -->
|
||||
<div *ngIf="hero">
|
||||
The hero's name is {{hero!.name}}
|
||||
</div>
|
||||
<!-- #enddocregion non-null-assertion-1 -->
|
||||
</div>
|
||||
|
||||
<a class="to-toc" href="#toc">top</a>
|
||||
|
||||
<!-- TODO: discuss this in the Style binding section -->
|
||||
|
|
|
@ -104,7 +104,7 @@ including:
|
|||
Other notable differences from JavaScript syntax include:
|
||||
|
||||
* no support for the bitwise operators `|` and `&`
|
||||
* new [template expression operators](guide/template-syntax#expression-operators), such as `|` and `?.`
|
||||
* new [template expression operators](guide/template-syntax#expression-operators), such as `|`, `?.` and `!`.
|
||||
|
||||
{@a expression-context}
|
||||
|
||||
|
@ -1931,6 +1931,27 @@ It works perfectly with long property paths such as `a?.b?.c?.d`.
|
|||
|
||||
<hr/>
|
||||
|
||||
{@a non-null-assertion-operator}
|
||||
|
||||
### The non-null assertion operator ( <span class="syntax">!</span> )
|
||||
|
||||
The Angular **non-null assertion operator (`!`)** is a post-fix operator that asserts that the preceeding property path
|
||||
will never be null or undefined.
|
||||
|
||||
Unlike the [_safe navigation operator_](guide/template-syntax#safe-navigation-operator "Safe naviation operator (?.)")
|
||||
the **non-null assertion operator** does not guard against a null or undefined; rather, it informs the TypeScript type
|
||||
checker that there is something it might be unaware of that ensures that this property path is defined. This prevents
|
||||
TypeScript from reporting that the path is possibly null or undefined when strict null checking is enabled.
|
||||
|
||||
For example, if you use [*ngIf](guide/template-syntax#ngIf) to check if `hero` is defined, you can assert the uses of
|
||||
`hero` are defined in the body of the template.
|
||||
|
||||
<code-example path="template-syntax/src/app/app.component.html" region="non-null-assertion-1" title="src/app/app.component.html" linenums="false">
|
||||
</code-example>
|
||||
|
||||
The Angular **non-null assertion operator (`!`)** is like TypeScript's _non-null assertion operator (!)_
|
||||
introduced in [TypeScript 2.0](http://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-0.html).
|
||||
|
||||
## Summary
|
||||
You've completed this survey of template syntax.
|
||||
Now it's time to put that knowledge to work on your own components and directives.
|
||||
|
|
Loading…
Reference in New Issue