在Angular中有關管道操作符(|)用法

通常我們需要使用管道實現對資​​料的格式化，以下這篇文章主要給大家介紹了關於Angular中管道操作符(|)的使用方法，文中透過範例程式碼介紹的非常詳細，需要的朋友可以參考借鑒，下面隨著小編來一起學習學習吧。

管道是什麼？

Angular的管道可以看成是一個資料格式化展示的工具。管道可以將資料格式化顯示，而不改變來源資料。例如關於日期的展示，對於來源資料使用管道1可以以yyyy/MM/dd來展示，也可以使用管道2展示成Feb 28, 2017的形式。但原數據仍是date，並沒有改變。利用管道我們可以將資料格式化的內容剝離出來，使其獨立，有需要格式化展示的時候選擇相應的管道進行處理即可。

一、範本運算式運算子

範本運算式語言使用了JavaScript 語法的子集，並補充了幾個用於特定場景的特殊操作符：管道操作符、安全導航操作符。

二、管道運算子 (|)

#在綁定之前，表達式的結果可能需要一些轉換。例如，可能希望吧數字顯示成金額、強製文字變成大寫，或過濾清單以及進行排序。

Angular 管道物件這樣的小型轉換來說是個很方便的選擇。

管道是一個簡單的函數，它接受一個輸入值，並傳回轉換結果。

Angular 的常用內建管道函數：

DatePipe，UpperCasePipe，LowerCasePipe，CurrencyPipi，PercentPipe，JsonPipe等。

它們用於模板表達式中，只要使用管道運算子(|) 就行了。

使用方法

管道運算子會把它左邊的表達式結果傳給它右邊的管道函數。也可以透過多個管道串聯表達式。

<p> 
 Title through a pipe chain: 
 {{title | uppercase | lowercase}} 
</p>

常用實例：

<p class="alert alert-warning"> 
 <p>{{title|uppercase }}</p> 
 <p>{{title|uppercase|lowercase }}</p> 
 <p>{{this|json}}</p> 
 <p>{{time|date:&#39;yyyy-MM-dd&#39;}}</p> 
 <p>{{number|percent}}</p> 
 <p>{{number|currency:&#39;CNY&#39;}}</p> 
</p>

ts 屬性：

export class AppComponent { 
 title = 'app'; 
 name = '张三丰'; 
 time = new Date(); 
 number = 1.123; 
 show(str: string) { 
 str += '---测试'; 
 return str; 
 } 
}

顯示結果：

##上面是我整理給大家的，希望今後對大家有幫助。

相關文章：

在Angular中如何實作顯示輸入內容

在Angular中如何實作查詢天氣預報

在js中如何判斷假日

在JS中如何實作留言板功能

##在nodejs中如何實作OAuth2.0授權服務認證

在webpack上如何建構vue專案

##在vue中如何實作閱讀全文

#在vue中如何取得dom元素

在js中如何實作轉換時間戳格式

##在nginx上部署vue專案（詳細教學）

在ionic3中如何實作隨機佈局瀑布流

以上是在Angular中有關管道操作符(|)用法的詳細內容。更多資訊請關注PHP中文網其他相關文章！