大佬教程收集整理的这篇文章主要介绍了angular 模版变量、模板表达式、模板语句,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
<hero-detail *ngFor = "let hero of heroes" [hero] = "hero"> </hero-detail>
let
关键字创建了一个名叫hero
的模板输入变量 ngFor
指令每次迭代都从数组中把当前元素赋值给hero
变量ngFor
的宿主元素(及其子元素)中引用模板输入变量hero
<button #buttonDOM></button> {{ButtonDOM}}
<button ref-buttonDOM></button> {{ButtonDOM}}
[object HTMLButtonElement]
<form #myForm="ngForm"> </form>
<p> {{ name }} </p>
<img src="{{ imgurl }}">
模板表达式产生一个值。
=
)+=
、-=
、...
)++
、--
)new
运算符;
或 ,
的链式表达式|
和 &
)|
、?.
、和 !
{{ 1 + 1 }}
[property] = "expression"
表达式上下文 是模版中各种绑定值的来源。
表达式上下文包括(优先级由高到低):
注意:
window
、document
、console.log
)|
)?.
)null
和undefined
值,保护视图渲染器,让它免于失败。当person
不存在时,下面代码将报错,组件视图将无法渲染。
{{person.namE}}
传统解决方法:
<ng-container *ngIf="person"> {{person.namE}} </ng-container>
{{person && person.namE}}
安全导航操作符方式:
{{person?.namE}}
!
)--StrictNullchecks
标志强制开启严格空值检查。null
或undefined
赋值给不允许为空的变量,类型检查器就会抛出一个错误。null
或undefined
,也会抛出一个错误。!
)用于告诉 TypeScript 的类型检查器对特定的属性表达式,不做 "严格空值检测"。<div *ngIf="hero"> {{hero!.namE}} </div>
模板语句用来响应由绑定目标(如 HTML 元素、组件或指令)触发的事件。
+=
、-=
、...
)++
、--
)new
运算符|
和 &
)=
);
或 ,
的链式表达式(event)="statement"
语句上下文包括:
$event
对象注意:
window
、document
、console.log
)以上是大佬教程为你收集整理的angular 模版变量、模板表达式、模板语句全部内容,希望文章能够帮你解决angular 模版变量、模板表达式、模板语句所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。