Angular中管道操作符(|)的使用方法
管道是什么?
Angular的管道可以看作成是一個數(shù)據(jù)格式化展示的工具。管道可以將數(shù)據(jù)格式化顯示,而不改變源數(shù)據(jù)。比如關(guān)于日期的展示,對于源數(shù)據(jù)使用管道1可以以yyyy/MM/dd來展示,也可以使用管道2展示成Feb 28, 2017的形式。但原數(shù)據(jù)依然是date,并沒有改變。利用管道我們可以將數(shù)據(jù)格式化的內(nèi)容剝離出來,使之獨(dú)立,有需要格式化展示的時(shí)候選擇相應(yīng)的管道進(jìn)行處理即可。
一、模板表達(dá)式操作符
模板表達(dá)式語言使用了JavaScript 語法的子集,并補(bǔ)充了幾個用于特定場景的特殊操作符:管道操作符、安全導(dǎo)航操作符。
二、管道操作符 (|)
在綁定之前,表達(dá)式的結(jié)果可能需要一些轉(zhuǎn)換。例如,可能希望吧數(shù)字顯示成金額、強(qiáng)制文本變成大寫,或者過濾列表以及進(jìn)行排序。
Angular 管道對象這樣的小型轉(zhuǎn)換來說是個很方便的選擇。
管道是一個簡單的函數(shù),它接受一個輸入值,并返回轉(zhuǎn)換結(jié)果。
Angular 的常用內(nèi)置管道函數(shù):
DatePipe,UpperCasePipe,LowerCasePipe,CurrencyPipi,PercentPipe,JsonPipe等。
它們用于模板表達(dá)式中,只要使用管道操作符(|) 就行了。
使用方法
管道操作符會把它左側(cè)的表達(dá)式結(jié)果傳給它右側(cè)的管道函數(shù)。還可以通過多個管道串聯(lián)表達(dá)式。
<div> Title through a pipe chain: {{title | uppercase | lowercase}} </div>
常用實(shí)例:
<div class="alert alert-warning"> <p>{{title|uppercase }}</p> <p>{{title|uppercase|lowercase }}</p> <p>{{this|json}}</p> <p>{{time|date:'yyyy-MM-dd'}}</p> <p>{{number|percent}}</p> <p>{{number|currency:'CNY'}}</p> </div>
ts 屬性:
export class AppComponent { title = 'app'; name = '張三豐'; time = new Date(); number = 1.123; show(str: string) { str += '---測試'; return str; } }
顯示結(jié)果:
總結(jié)
以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,如果有疑問大家可以留言交流,謝謝大家對腳本之家的支持。
相關(guān)文章
Angular 理解module和injector,即依賴注入
本文主要介紹Angular 理解module和injector的知識,這里整理了相關(guān)知識,并詳細(xì)介紹了依賴注入的問題,有興趣的小伙伴可以參考下2016-09-09AngularJS實(shí)現(xiàn)的根據(jù)數(shù)量與單價(jià)計(jì)算總價(jià)功能示例
這篇文章主要介紹了AngularJS實(shí)現(xiàn)的根據(jù)數(shù)量與單價(jià)計(jì)算總價(jià)功能,涉及AngularJS事件響應(yīng)與數(shù)值運(yùn)算相關(guān)操作技巧,需要的朋友可以參考下2017-12-12Angular4實(shí)現(xiàn)動態(tài)添加刪除表單輸入框功能
這篇文章主要介紹了Angular4實(shí)現(xiàn)動態(tài)添加刪除表單輸入框功能,需要的朋友可以參考下2017-08-08Angular懶加載機(jī)制刷新后無法回退的快速解決方法
使用oclazyload懶加載angular的模塊,刷新頁面后,單擊回退按鈕無法返回上一個頁面.怎么回事呢?下面小編給大家?guī)砹薬ngular懶加載機(jī)制刷新后無法回退的快速解決方法,非常不錯,感興趣的朋友參考下2016-08-08AngularJs $parse、$eval和$observe、$watch詳解
這篇文章主要介紹了AngularJs $parse、$eval和$observe、$watch的相關(guān)資料,需要的朋友可以參考下2016-09-09AngularJS基礎(chǔ) ng-submit 指令簡單示例
本文主要介紹AngularJS ng-submit 指令,這里對ng-submit 指令的基礎(chǔ)資料做了詳細(xì)介紹整理,并附有代碼示例,有需要的小伙伴可以參考下2016-08-08