极客angular知识分享（5）-- 数据绑定

数据绑定

---

 

数据绑定组成部分

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" />