1.截取字符数组
截取字符数组
@Component({
selector: 'slice-list-pipe',
template: `<ul>
<li *ngFor="let i of collection | slice:1:3">{{i}}</li>
</ul>`
})
export class SlicePipeListComponent {
collection: string[] = ['a', 'b', 'c', 'd'];
}
页面渲染出来
<li>b</li>
<li>c</li>
截取字符串
@Component({
selector: 'slice-string-pipe',
template: `<div>
<p>{{str}}[0:4]: '{{str | slice:0:4}}' - output is expected to be 'abcd'</p>
<p>{{str}}[4:0]: '{{str | slice:4:0}}' - output is expected to be ''</p>
<p>{{str}}[-4]: '{{str | slice:-4}}' - output is expected to be 'ghij'</p>
<p>{{str}}[-4:-2]: '{{str | slice:-4:-2}}' - output is expected to be 'gh'</p>
<p>{{str}}[-100]: '{{str | slice:-100}}' - output is expected to be 'abcdefghij'</p>
<p>{{str}}[100]: '{{str | slice:100}}' - output is expected to be ''</p>
</div>`
})
export class SlicePipeStringComponent {
str: string = 'abcdefghij';
}
2.数字格式转换（保留2位小数等）
number_expression | number[:digitInfo]
格式化为文本。
expression是一个数字：
digitInfo是string具有以下格式的：
{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}
minIntegerDigits是要使用的最小数字的整数数字。
默认为1
minFractionDigits是分数后的最小位数。
默认为0
maxFractionDigits是分数后的最大位数。默认为3
@Component({
selector: 'number-pipe',
template: `<div>
<p>e (no formatting): {{e}}</p>
<p>e (3.1-5): {{e | number:'3.1-5'}}</p> //整数最小有3位。小数最小有一位，最多有5位
<p>pi (no formatting): {{pi}}</p>
<p>pi (3.5-5): {{pi | number:'3.5-5'}}</p> //整数最小3位，小数只能有5位
</div>`
})
export class NumberPipeComponent {
pi: number = 3.141592;
e: number = 2.718281828459045;
}
将数字变成两位小数
<p>{{number | number:'1.2-2'}}</p>
将数字变成百分数两位小数 20.84%
<p>{{number | percent:'1.2-2'}}</p>
3.大小写转换
@Component({
selector: 'lowerupper-pipe',
template: `<div>
<label>Name: </label><input #name (keyup)="change(name.value)" type="text">
<p>In lowercase: <pre>'{{value | lowercase}}'</pre> //将value转换成小写
<p>In uppercase: <pre>'{{value | uppercase}}'</pre> //将value转换成大写
</div>`
})
export class LowerUpperPipeComponent {
value: string;
change(value: string) { this.value = value; }
}
4.日期格式转换
{{ today | date[:format] }}
today是一个日期对象或数字（自UTC时代以来的毫秒）或ISO字符串
[:format] 指明要包括的日期/时间组件。格式可以如下所示预定义或自定义，如表所示。
'medium'：等同于'yMMMdjms'（例如Sep 3, 2010, 12:05:08 PMfor en-US）
'short'：等同于'yMdjm'（例如9/3/2010, 12:05 PMfor en-US）
'fullDate'：等同于'yMMMMEEEEd'（例如Friday, September 3, 2010for en-US）
'longDate'：等同于'yMMMMd'（例如September 3, 2010for en-US）
'mediumDate'：等同于'yMMMd'（例如Sep 3, 2010for en-US）
'shortDate'：等同于'yMd'（例如9/3/2010for en-US）
'mediumTime'：等同于'jms'（例如12:05:08 PMfor en-US）
'shortTime'：等同于'jm'（例如12:05 PMfor en-US）
常用实例
{{ today | date:"y-MM-dd"}} //2017-03-14
{{ today | date:"mmss"}} //11:35
{{ today | date:"y年MM月dd日HH时mm分ss秒"}} //2017年03月14日11时37分12秒
官方例子
@Component({
selector: 'date-pipe',
template: `<div>
<p>Today is {{today | date}}</p>
<p>Or if you prefer, {{today | date:'fullDate'}}</p>
<p>The time is {{today | date:'jmZ'}}</p>
</div>`
})
export class DatePipeComponent {
today: number = Date.now();
}
5.对象转换json
@Component({
selector: 'json-pipe',
template: `<div>
<p>Without JSON pipe:</p>
<pre>{{object}}</pre>
<p>With JSON pipe:</p>
<pre>{{object | json}}</pre>
</div>`
})
export class JsonPipeComponent {
object: Object = {foo: 'bar', baz: 'qux', nested: {xyz: 3, numbers: [1, 2, 3, 4, 5]}};
}
6.数字格式化为货币
@Component({
selector: 'currency-pipe',
template: `<div>
<p>A: {{a | currency:'USD':false}}</p>
<p>B: {{b | currency:'USD':true:'4.2-2'}}</p>
</div>`
})
export class CurrencyPipeComponent {
a: number = 0.259;
b: number = 1.3495;
}
