5 lines
5.8 KiB
JSON
5 lines
5.8 KiB
JSON
{
|
|
"id": "guide/template-expression-operators",
|
|
"title": "Template expression operators",
|
|
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/guide/template-expression-operators.md?message=docs%3A%20describe%20your%20change...\" aria-label=\"Suggest Edits\" title=\"Suggest Edits\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">mode_edit</i></a>\n</div>\n\n\n<div class=\"content\">\n <h1 id=\"template-expression-operators\">Template expression operators<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/template-expression-operators#template-expression-operators\"><i class=\"material-icons\">link</i></a></h1>\n<div class=\"callout is-critical\">\n<header>Marked for archiving</header>\n<p>To ensure that you have the best experience possible, this topic is marked for archiving until we determine that it clearly conveys the most accurate information possible.</p>\n<p>In the meantime, this topic might be helpful: <a href=\"guide/hierarchical-dependency-injection\">Hierarchical injectors</a>.</p>\n<p>If you think this content should not be archived, please file a <a href=\"https://github.com/angular/angular/issues/new?template=3-docs-bug.md\">GitHub issue</a>.</p>\n</div>\n<p>The Angular template expression language employs a subset of JavaScript syntax supplemented with a few special operators\nfor specific scenarios.</p>\n<div class=\"alert is-helpful\">\n<p>See the <live-example></live-example> for a working example containing the code snippets in this guide.</p>\n</div>\n<a id=\"non-null-assertion-operator\"></a>\n<h2 id=\"the-non-null-assertion-operator---\">The non-null assertion operator ( <code>!</code> )<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/template-expression-operators#the-non-null-assertion-operator---\"><i class=\"material-icons\">link</i></a></h2>\n<p>When you use TypeScript's <code>--strictNullChecks</code> flag, you can prevent the type checker from throwing an error with Angular's non-null assertion operator, <code>!</code>.</p>\n<p>The Angular non-null assertion operator causes the TypeScript type checker to suspend strict <code>null</code> and <code>undefined</code> checks for a specific property expression.</p>\n<p>For example, you can assert that <code>item</code> properties are also defined.</p>\n<code-example path=\"template-expression-operators/src/app/app.component.html\" region=\"non-null\" header=\"src/app/app.component.html\">\n<!-- Assert color is defined, even if according to the `Item` type it could be undefined. -->\n<p>The item's color is: {{item.color!.toUpperCase()}}</p>\n\n</code-example>\n<p>Often, you want to make sure that any property bindings aren't <code>null</code> or <code>undefined</code>.\nHowever, there are situations in which such states are acceptable.\nFor those situations, you can use Angular's non-null assertion operator to prevent TypeScript from reporting that a property is <code>null</code> or <code>undefined</code>.</p>\n<p>The non-null assertion operator, <code>!</code>, is optional unless you turn on strict null checks.</p>\n<p>For more information, see TypeScript's <a href=\"http://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-0.html\" title=\"Strict null checking in TypeScript\">strict null checking</a>.</p>\n<a id=\"any-type-cast-function\"></a>\n<h2 id=\"the-any-type-cast-function\">The <code>$any()</code> type cast function<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/template-expression-operators#the-any-type-cast-function\"><i class=\"material-icons\">link</i></a></h2>\n<p>Sometimes a binding expression triggers a type error during <a href=\"guide/aot-compiler\">AOT compilation</a> and it is not possible or difficult to fully specify the type.\nTo silence the error, you can use the <code>$any()</code> cast function to cast\nthe expression to the <a href=\"https://www.typescriptlang.org/docs/handbook/basic-types.html#any\"><code>any</code> type</a> as in the following example:</p>\n<code-example path=\"built-in-template-functions/src/app/app.component.html\" region=\"any-type-cast-function-1\" header=\"src/app/app.component.html\">\n<p>The item's undeclared best by date is: {{$any(item).bestByDate}}</p>\n\n</code-example>\n<p>Using <code>$any()</code> prevents TypeScript from reporting that <code>bestByDate</code> is not a member of the <code>item</code> object.</p>\n<p>The <code>$any()</code> cast function also works with <code>this</code> to allow access to undeclared members of the component.</p>\n<code-example path=\"built-in-template-functions/src/app/app.component.html\" region=\"any-type-cast-function-2\" header=\"src/app/app.component.html\">\n<p>The item's undeclared best by date is: {{$any(this).bestByDate}}</p>\n\n</code-example>\n<p>The <code>$any()</code> cast function works anywhere in a binding expression where a method call is valid.</p>\n\n \n</div>\n\n<!-- links to this doc:\n - guide/aot-compiler\n - guide/example-apps-list\n - guide/interpolation\n - guide/template-syntax\n - guide/template-typecheck\n-->\n<!-- links from this doc:\n - guide/aot-compiler\n - guide/hierarchical-dependency-injection\n - guide/template-expression-operators#template-expression-operators\n - guide/template-expression-operators#the-any-type-cast-function\n - guide/template-expression-operators#the-non-null-assertion-operator---\n - http://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-0.html\n - https://github.com/angular/angular/edit/master/aio/content/guide/template-expression-operators.md?message=docs%3A%20describe%20your%20change...\n - https://github.com/angular/angular/issues/new?template=3-docs-bug.md\n - https://www.typescriptlang.org/docs/handbook/basic-types.html#any\n-->"
|
|
} |