Angular10 数据绑定

Angular10数据绑定 中文官网地址

绑定方式

绑定类型	语法	分类	举例
插值、属性、attribute、css类、样式	{{expression}} [target] = 'expression’ bind-target=‘expression’	单向 从数据源到视图	数据绑定 {{title}}
事件	(target)='statement’ on-target=‘statement’	单向 从视图到数据源的单向绑定	点击事件 (click)=‘handleClick’
双向	[(target)]='expression’ bindon-target=‘expression’	双向 视图到数据源到视图	输入框的双向绑定 [(ngModel)]=‘inputValue’

HTML Attribute和DOM Property区别

1. Attribute是由HTML定义的，Property是从DOM节点访问的

   • 一些HTML Attribute可以1：1映射到DOM Property，如id
   • 某些HTML Attribute是没有相应的Property，如aria-*
   • 某些DOM Property没有相应的HTML Attribute，如textContent

2. HTML Attribute和DOM Property是不同的。在Angular中HTML Attribute的唯一作用是初始化元素和指令的状态，模板绑定用的是DOM Property和事件，而不是HTML Attribute

3. 实例

   • Property绑定要求是一个布尔值
   • Attribute绑定的取决于改值是否为null

   <input [disabled]='flag ? true : false' />
   <input [attr.disabled]="flag ? 'disabled' : null" />