Pipes 管線

Angular DOCS
不用改變原始資料的顯示模式，而是透過外部（也就是Pipe）的模式來調整要顯示的資料內容。

• DatePipe 日期

  • 官方文件：Angular DOCS
  • 線上範例(stackbliz)：angular-datapipe-demo

  1. 使用方法
     {{ value_expression | date [ :format(格式) [ :timezone(時區) [ :locale(地區) ] ] ] }}

     nowDate = new Date();
     

     <!--2023/08/28-->
     <p>{{nowDate | date:'yyyy/MM/dd'}}</p> 
     
     <!--2023/8/28 上午9:34-->
     <p>{{nowDate | date:'short'}}</p> 
     
     <!--西元2023年 08月 28日 上午09:34-->
     <p>{{nowDate | date:'西元yyyy年 MM月 dd日 hh:mm'}}</p> 
     

  2. 常用參數

     參數	同等效參數	結果

     'short' | 'M/d/yy, h:mm a' | 2023/8/28 上午9:34
     'medium' | 'MMM d, y, h:mm:ss a' | 2023年8月28日 上午9:34:34
     'shortDate' | 'M/d/yy' | 2023/8/28
     'mediumDate' | 'MMM d, y' | 2023年8月28日
     'longDate' | 'MMMM d, y' | 2023年8月28日
     'fullDate' | 'EEEE, MMMM d, y' | 2023年8月28日 星期一
     'shortTime' | 'h:mm a' | 上午9:34
     'mediumTime' | 'h:mm:ss a' | 上午9:34:34

• CurrencyPipe 貨幣

  • 官方文件：Angular DOCS CurrencyPipe
  • 線上範例(stackbliz)：angular-currency-decimal-percent-pipe

  1. 使用方法
     {{ value_expression | currency [ :currencyCode(ISO 4217貨幣縮寫) [ :display(顯示方式) [ :digitsInfo(顯示長度) [ :locale(地區) ] ] ] ] }}

     money: number = 1000;
     

     <!--$1,000.00-->
     <p>{{money | currency}}</p>
     
     <!--NT$1,000.00-->
     <p>{{money | currency:'TWD'}}</p>
     
     <!--TWD1,000-->
     <p>{{money | currency:'TWD':'code':'0.0-0'}}</p>
     

  2. 常用參數

     參數	結果

     　| $1,000.00
     'TWD' | NT$1,000.00
     'TWD':'code' | TWD1,000.00
     'TWD':'symbol' | NT$1,000.00
     'TWD':'symbol':'4.2-2' | NT$1,000

• DecimalPipe 小數點

  • 官方文件：Angular DOCS DecimalPipe

  1. 使用方法
     {{ value_expression | number [ :digitsInfo(顯示長度) [ :locale(地區) ] ] }}

     money: number = 10000000;
     

     <!--10,000,000-->
     <p>{{money | number}}</p>
     
     <!--10,000,000.0-->
     <p>{{money | number:'1.1-1'}}</p>
     

  2. 常用參數

     參數	結果

     　 | 10,000,000
     '1.1-1’ | 10,000,000.0
     '1.2-2’ | 10,000,000.00

• PercentPipe 百分比

  • 官方文件：Angular DOCS PercentPipe

  1. 使用方法
     {{ value_expression | percent [ :digitsInfo(顯示長度) [ :locale(地區) ] ] }}

     num: number = 0.85;
     

     <!--85%-->
     <p>{{num | percent}}</p>
     

  2. 常用參數

     參數	結果

     　 | 85%
     '1.1’ | 85.0%
     '1.2’ | 85.00%

• AsyncPipe 同步訂閱

  • 官方文件：Angular DOCS AsyncPipe
  • 線上範例(stackbliz)：angular-asyncpipe-example

  1. 使用方法
     {{ value_expression | async }}

     // Service 通常會放 功能性Function
     // 這邊是再做取得資料的動作
     onGetData(){
     	return this.http.get('https://jsonplaceholder.typicode.com/todos');
     }
     

     todosList!: any;
     constructor(private appService: AppService) {}
     
     ngOnInit() {
     	// 從剛剛 Service 的 Function 來取得資料
       this.todosList = this.appService.getTodos(); 
     }
     

     <!--85%-->
     <li *ngFor="let todo of todosList | async">{{todo.title}}</li>
     

• 自訂義Pipe

  1. 使用方法

     import { Pipe, PipeTransform } from '@angular/core';
     
     // 此 Pipe 讓文字只顯示 10 字做預覽
     @Pipe({ name: 'formateWord' })
     export class CustomDataPipe1 implements PipeTransform {
       transform(value: any): any {
         return value.substring(0,10)
       }
     }
     // 黃字: 依使用調整
     // 藍色: 傳入參數、傳出資料
     

     // utility是我放置自定義Pipe的資料夾
     import { CustomDataPipe1 } from './utility/customDatapipe'; 
     
     @NgModule({
     	declarations: [
     		CustomDataPipe1
     	]
     })
     

     txt: string = "ABCDEFGHIJKLMN";
     

     <!--ABCDEFGHIJ-->
     <p>{{txt | formateWord}}</p>