ng2 内置pipe 一览
pipe说明：
- UpperCasePipe --- Transforms text to uppercase.
- LowerCasePipe --- Transforms text to lowercase.
- JsonPipe --- Converts value into JSON string.
- CurrencyPipe --- Formats a number as currency using locale rules.
- DatePipe --- Formats a date according to locale rules.
- SlicePipe --- Creates a new List or String containing a subset (slice) of the elements.
- TitleCasePipe --- Transforms text to uppercase.
- PercentPipe --- Formats a number as a percentage according to locale rules.
- DecimalPipe --- Formats a number according to locale rules.
- AsyncPipe --- Unwraps a value from an asynchronous primitive. observable_or_promise_expression | async
和ng1对比如下：
总结:
- ng1中称为filter,ng2中称为pipe 功能类似
- ng1中的 limitTo被替换为 slicePipe
- 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>
结果如下：
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.
参考：
