ng2 內置pipe 一覽

pipe說明：

1. UpperCasePipe --- Transforms text to uppercase.
2. LowerCasePipe --- Transforms text to lowercase.
3. JsonPipe --- Converts value into JSON string.
4. CurrencyPipe --- Formats a number as currency using locale rules.
5. DatePipe --- Formats a date according to locale rules.
6. SlicePipe --- Creates a new List or String containing a subset (slice) of the elements.

1. TitleCasePipe --- Transforms text to uppercase.
2. PercentPipe --- Formats a number as a percentage according to locale rules.
3. DecimalPipe --- Formats a number according to locale rules.
4. AsyncPipe --- Unwraps a value from an asynchronous primitive. observable_or_promise_expression | async

和ng1對比如下：

總結:

1. ng1中稱為filter,ng2中稱為pipe 功能類似
2. ng1中的 limitTo被替換為 slicePipe
3. ng2 新增了 asyncPipe，decimalPipe等

• digitInfo is a string which has a following format:

• {minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}

• (數值位數限制，整數最小位數.小數最小位數-小數最大位數)

• minIntegerDigits is the minimum number of integer digits to use. Defaults to 1. 整型數最小的位數

• minFractionDigits is the minimum number of digits after fraction. Defaults to 0. 小數點后最小的位數

• maxFractionDigits is the maximum number of digits after fraction. Defaults to 3. 小數點后最大的位數

    <p>{{'abcd' | uppercase}}</p>
    <p>{{'ABcd' | lowercase}}</p>
    <p>{{'{a:1}' | json}}</p>
    <p>{{'1000' | currency}}</p>
    <p>{{'1000' | currency:CNY:true}}</p>
    <p>{{date | date:'y-MM-d'}}</p>
    <p>{{'ABcd' | slice:0:2}}</p>
    <hr>
    <p>{{'abDfEf' | titlecase}}</p>
    <p>{{0.2611123 | percent}}</p>
    <p>{{0.26 | percent:'.2'}}</p>
    <p>{{0.262323 | percent:'.2-4'}}</p> 
  

結果如下：

![](http://upload-images.jianshu.io/upload_images/3915498-364df115665cba9b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

AsyncPipe例子如下：

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

    @Component({
      selector: 'app-pipes-app-component',
      templateUrl: './pipes-app-component.component.html',
      styleUrls: ['./pipes-app-component.component.css']
    })
    export class PipesAppComponentComponent implements OnInit {
      promise:Promise<any>;
      constructor() {
        this.promise = new Promise(function(resolve, reject) {
          setTimeout(function() {
            resolve("Hey, I'm from a promise.");
          }, 2000)
        });
      }
    
      ngOnInit() {
      }
    
    }


    <p>
      pipes-app-component works!
    </p>
    <p>{{ promise | async}}</p>

兩秒后顯示：Hey, I'm from a promise.

參考：

https://auth0.com/blog/angular2-series-working-with-pipes/

https://angular.io/api/common/AsyncPipe