数据绑定


数据绑定组成部分

1.宿主元素


将要受到绑定影响的html元素


2.方括号


告诉angular是单向绑定。当angular看到方括号时，会将表达式的结果传递给目标，以修改宿主元素


3.目标


数据绑定将进行的操作。分为​​指令​​​和​​属性绑定​​两种。


4.表达式


一段JavaScript代码，它使用模板的组件提供的上下文进行求值，因此可以访问组件中的属性和方法。



属性绑定


标准属性绑定


[property] 用于设置JavaScript对象的某个属性



[taget]="expr"单向绑定


<input type="text" [value]="count">


字符串插入


将表达式结果插入包含在宿主元素的文本内容中



{{expr}} 字符串插入当地


<div>count的值：{{count}}</div>


元素属性绑定


[​​attr.name​​] 元素属性绑定，对于没有对应dom属性的html宿主元素属性，可以使用该绑定来设置属性的值


<table class="table table-sm table-bordered table-striped m-t-1">
<tr>
  <th>1</th>
  <th>2</th>
  <th>3</th>
  <th>4</th>
  <th>5</th>
</tr>
<tr>
  <td [attr.colspan]="count">count的值：{{count}}</td>
</tr>
</table>

类绑定

  1. [class]="expr" 求值结果会替换任何现有的css类成员资格
<div [class]="getClasses(1)">22</div>
<div [class]="getClasses(2)">22</div>

2 .[class.myClass]="expr" 求值结果设置css类myClass的成员资格

<div [class.bg-warning]="count > 1">22</div>

3.[ngClass]="map"指令设置CSS类

<div [ngClass]="getClass()">
  单向绑定
</div>
getClass():Object{
    return {
      "text-xs-center bg-info":this.count > 1,
      "bg-warning":this.count <= 1
    }
  }


样式绑定

1.[style.myStyle]="expr" 标准属性绑定，用于将单个样式的属性设置为表达式的值

<div [style.fontSize]="mySize">22</div>

2.[style.myStyle.units]="expr" 特殊样式绑定，将样式值的单位作为目标一部分指定

<div [style.bg-warning]="count > 1">22</div>

3.[ngStyle]="map"指令设置CSS类

<div [ngStyle]="getStyles()">22</div>
getStyles():Object{
    return {
      "fontSize":"14px",
      "color":"red",
    }
  }


双向数据绑定

1.通过()和[] 进行双向绑定

<!-- 双向绑定1 -->
<input type="text" name="mytxt" id="mytxt" (input)="inputPro=$event.target.value" [value]="inputPro" />
通
过ngModel进行双向绑定
<input type="text" name="mytxt" id="mytxt" [(ngModel)]="inputPro" />