angular4 (3)數(shù)據(jù)綁定

數(shù)據(jù)綁定可以將組件渤刃、控制器的屬性和方法玛臂,和組件的模版連接起來彻亲,大大降低了開發(fā)時的編碼量胜茧。例如:

6.jpg

<1>事件綁定

例如:

7.jpg

1.新建一個項目

ng new dataPro

2.新建一個組件

ng g component bind

3.修改bind組件模版 -- bind.component.html

<p>
  bind works!
</p>
<!-- $event 是把當(dāng)前點擊的事件傳過去 -->
<button (click)="doOnClick($event)">事件綁定</button>

4.修改bind組件控制器 -- bind.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-bind',
  templateUrl: './bind.component.html',
  styleUrls: ['./bind.component.css']
})
export class BindComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }
// 1.寫一個doOnClick()方法
// 2.接收一個任意屬性的事件 event:any
    doOnClick(event:any) {
        console.log(event);
    }
}

5.將組件添加到app組件中 -- app.component.html

<h3>事件綁定測試</h3>
<app-bind></app-bind>

6.結(jié)果

8.jpg

點擊后,控制臺中輸出
9.jpg

<2>dom屬性綁定

12.jpg

插值表達式其實就是dom屬性綁定
1.修改bing.component.html

<p>
  bind works!
</p>
<!-- 寫法一:用[]的方式把屬性括起來骗炉,通過控制器的imgUrl來給src賦值 -->
<img [src]="imgUrl"><br><br>

<!-- 寫法二:用插值表達式來寫 -->
<img src="{{imgUrl}}">

2.控制器中定義imgUrl -- bind.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
 selector: 'app-bind',
 templateUrl: './bind.component.html',
 styleUrls: ['./bind.component.css']
})
export class BindComponent implements OnInit {
 // 定義imgUrl
 imgUrl:string = "http://placehold.it/400x200";
 constructor() { }
 ngOnInit() {
 }
}

【html屬性和dom屬性的區(qū)別

(1)修改bind模版 -- bind.component.html

<p>
  bind works!
</p>
<!-- input標簽的value屬性設(shè)為了tom -->
<input type="text" value="tom" (input)="doOnInput($event)">

(2)修改bind.component.ts

    doOnInput(event:any) {
        // 1.輸出dom屬性
        console.log("dom屬性:"+event.target.value);
        //2.輸出html屬性
        console.log("html屬性:"+event.target.getAttribute("value"));

    }

(4)結(jié)果
當(dāng)修改input的內(nèi)容時照宝,控制臺中打印出

10.jpg

(5)總結(jié)
1. HTML屬性的值指定了初始值;在這里一開始設(shè)置了value=“tom”句葵,所以它一直都是tom厕鹃,如果一開始沒有設(shè)置value的值,那么它就一直為null;
????DOM屬性的值表示當(dāng)前值乍丈。DOM屬性的值可以改變剂碴;當(dāng)表單的value屬性變化時,它的值也跟著變化轻专;

2. 模版綁定是通過DOM屬性和事件來工作的忆矛,而不是HTML屬性
3.少量HTML屬性和DOM屬性之間具有1:1的映射,如id
4. 有些HTML屬性沒有對應(yīng)的DOM屬性,如colspan
5. 有些DOM屬性沒有對應(yīng)的HTML屬性催训,如textContent
6. 就算名字相同洽议,HTML屬性和DOM屬性也不是同一樣?xùn)|西

<3>html屬性綁定

1.基本html屬性綁定

//模版中
<table>
   <tr>
       <!-- 屬性前面加attr前綴,值為后臺傳來的size變量 -->
       <td [attr.colspan]="size">基本html屬性綁定</td>
   </tr>
</table>

//控制器中聲明變量
size:number = 2;
11.jpg

2.CSS類綁定
(1)class全替換

//模版中
<div [class]="divClass">css類屬性綁定</div>

//控制器中
// 一開始divClass的值為空
  divClass:string;
  constructor() {
// 設(shè)置定時函數(shù)漫拭,將divClass設(shè)為a,b,c
// css文件中定義了a為黃背景亚兄,b為紅字,c為60px字體大小
//最后效果是3秒后會將a,b,c賦值給class
    setTimeout(()=>{
        this.divClass = 'a b c';
    },3000)
   }

(2)部分class固定采驻,切換單一class

//模版中 
<!-- a,b為固定的,c為通過后臺isBig(boolean)的值來確定是否加上去 -->
<div class="a b" [class.c]="isBig">css類屬性綁定</div>

//控制器中
   //剛開始為false,即不加上c
   isBig:boolean = false;
   constructor() {
       // 3秒后加上c
       setTimeout(()=>{
           this.isBig = true;
       },3000)
   }

(3)切換多個class

//模版中
<!-- ngClass需要一個key:value的對象 -->
<!--key是類名审胚,value為boolean,為true則添加對應(yīng)的key到calss中-->
<div [ngClass]="divClass">css類屬性綁定</div>

//控制器中
  divClass:any = {
        a:false,
        b:false,
        c:false
    }
constructor() {
      //3秒后設(shè)為true
      setTimeout(()=>{
          this.divClass = {
              a:true,
              b:true,
              c:true
          }
      },3000)
  }

3.style樣式綁定
(1)單個style

//模版中
<!-- 當(dāng)isDev為true,則color為red,反之為blue -->
<div [style.color] = "isDev?'red':'blue'">style樣式綁定</div>

//控制器中
isDev:boolean = true;

(2)當(dāng)屬性帶有單位時

//模版中
<!-- .px即為font-size的單位 -->
<div [style.fone-size.px] = "isDev?14:16">style樣式綁定定</div>

(3)設(shè)置多個style

//模版中
<div [ngStyle] = "divStyle">css類屬性綁定</div>
//控制器中
divStyle:any = {
    color: 'red',
    background:'yellow'
};
   constructor() {
         //3秒后修改樣式
         setTimeout(()=>{
             this.divStyle = {
             color: 'yellow',
             background:'red'
             };
      },3000)
}

<4>雙向綁定

雙向綁定可以使視圖和模型保持一致礼旅,無論哪一方進行改變膳叨,另一方都能立即同步。

//模版中
//ngModel僅適用于文本痘系,文本框等既能修改菲嘴,又能顯示的標簽
//下面代碼的作用:當(dāng)模版中輸入框內(nèi)容改變時,控制器中屬性name的值同時改變碎浇。
<input [(ngModel)]="name" name="test"> <br>
{{name}}
等同于:
<input [value]="name" (input)="doOnInput($event)"><br>
{{name}}

//控制器中
export class BindComponent implements OnInit {
//1.定義變量name
  name:string;
  constructor() {
    //2.三秒后將tom賦值給name
    setInterval(()=> {
        this.name="tom";
    },3000)
   }
      ngOnInit() {
      }
      // 3.doOnInput把變量name改成當(dāng)前input的value屬性的值
    doOnInput(event) {
        this.name = event.target.value;
    }
}

ps:若報錯

Can't bind to 'ngModel' since it isn't a known property of 'input'

報錯原因 :app.module.ts中沒有import FormsModule
解決方式:在app.module.ts中引入FormsModule


13.jpg

<5>響應(yīng)式編程

1.rxjs
響應(yīng)式編程主要是通過觀察者模式實現(xiàn),在Angular中的Rxjs即是它的具體實現(xiàn)璃俗。
2.模版變量
模板變量是在html標簽上使用#開頭來定義的變量奴璃,它代表html元素本身。

//模版中
<input (keyup)="onKeyUp($event)">
<input #iValue (keyup)="onKeyUp(iValue.value)">
//控制器
 onKeyUp(param: any) {
   let iInput;
   try {
     iInput = param.target.value;
   } catch (e) {
     iInput = param;
   }
   console.log(iInput);
 }

<6>管道

常用管道:
(1)date:

14.png

15.png

(2)uppercase:字母大寫

(3)lowercase:字母小寫

(4)number:數(shù)字格式化


16.png

2:表示兩位整數(shù)
2-2:表示兩位小數(shù)城豁,其中前面的2表示最少顯示2位苟穆,后面的2表示最 多顯示2位,超出部分四舍五入唱星,不足部分補0

(5)async:異步管道雳旅,用來處理異步的流

(6)自定義管道

1.生成管道
ng g pipe pipeflie/multiple
ps:管道和組件一樣,需要聲明在app.module.js里的declarations里面

2.修改multiple.pepe.ts

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
  name: 'multiple'
})
export class MultiplePipe implements PipeTransform {

  transform(value: number, args?: number): any {
    if(!args){
        args = 1;
    }
    return value * args;//返回乘積
  }
}

3.定義變量

  size:number = 2;

4.修改模版

<p>自定義管道測試{{size | multiple :'5'}}</p>

5.結(jié)果


17.png
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末间聊,一起剝皮案震驚了整個濱河市攒盈,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌哎榴,老刑警劉巖型豁,帶你破解...
    沈念sama閱讀 222,681評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異尚蝌,居然都是意外死亡迎变,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評論 3 399
  • 文/潘曉璐 我一進店門飘言,熙熙樓的掌柜王于貴愁眉苦臉地迎上來衣形,“玉大人,你說我怎么就攤上這事姿鸿∽晃猓” “怎么了倒源?”我有些...
    開封第一講書人閱讀 169,421評論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長纪铺。 經(jīng)常有香客問我相速,道長,這世上最難降的妖魔是什么鲜锚? 我笑而不...
    開封第一講書人閱讀 60,114評論 1 300
  • 正文 為了忘掉前任突诬,我火速辦了婚禮,結(jié)果婚禮上芜繁,老公的妹妹穿的比我還像新娘旺隙。我一直安慰自己,他們只是感情好骏令,可當(dāng)我...
    茶點故事閱讀 69,116評論 6 398
  • 文/花漫 我一把揭開白布蔬捷。 她就那樣靜靜地躺著,像睡著了一般榔袋。 火紅的嫁衣襯著肌膚如雪周拐。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,713評論 1 312
  • 那天凰兑,我揣著相機與錄音妥粟,去河邊找鬼。 笑死吏够,一個胖子當(dāng)著我的面吹牛勾给,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播锅知,決...
    沈念sama閱讀 41,170評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼播急,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了售睹?” 一聲冷哼從身側(cè)響起桩警,我...
    開封第一講書人閱讀 40,116評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎昌妹,沒想到半個月后生真,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,651評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡捺宗,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,714評論 3 342
  • 正文 我和宋清朗相戀三年柱蟀,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片蚜厉。...
    茶點故事閱讀 40,865評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡长已,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情术瓮,我是刑警寧澤康聂,帶...
    沈念sama閱讀 36,527評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站胞四,受9級特大地震影響恬汁,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜辜伟,卻給世界環(huán)境...
    茶點故事閱讀 42,211評論 3 336
  • 文/蒙蒙 一氓侧、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧导狡,春花似錦约巷、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,699評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至枚赡,卻和暖如春氓癌,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背贫橙。 一陣腳步聲響...
    開封第一講書人閱讀 33,814評論 1 274
  • 我被黑心中介騙來泰國打工贪婉, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人料皇。 一個月前我還...
    沈念sama閱讀 49,299評論 3 379
  • 正文 我出身青樓谓松,卻偏偏與公主長得像星压,于是被迫代替她去往敵國和親践剂。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,870評論 2 361

推薦閱讀更多精彩內(nèi)容

  • 數(shù)據(jù)單項綁定:把模型的數(shù)據(jù)展示到視圖當(dāng)中 綁定的方式有三種1.使用插值語法:{{模型屬性}} 加載時娜膘,會造成閃爍逊脯。...
    嗯嗯_7a53閱讀 325評論 0 0
  • 在項目中,老程序員都知道顯示數(shù)據(jù)的控件的操作靈活性很重要竣贪。Visual Studio 2008里面提供了一個很強大...
    北風(fēng)知我意閱讀 1,569評論 0 1
  • 那一天军洼, 我閉目在經(jīng)殿的香霧中, 驀然聽見演怎, 你誦經(jīng)中的真言匕争; 那一月, 我搖動所有的經(jīng)簡爷耀, 不為超度甘桑, 只為觸摸...
    杏兒飛翔閱讀 227評論 0 0
  • 自從離開大學(xué),回過頭看看,接近七年了跑杭,一路懵懂著前進铆帽,性格的原因讓自己在這七年里過的謹小慎微,過的身心疲憊德谅,過的既...
    小胚芽閱讀 234評論 0 1
  • 一個擅于和自己做比較的人爹橱,同樣擅于進步;一個擅于與他人做比較的人窄做,只會感到痛苦愧驱。 小白是我的高中好友,也是我的...
    i愛書boy閱讀 371評論 0 0