- 日期格式转换（date）
- 数字（number）
- 大小写转换（uppercase、lowercase）
- 自定义管道（ng g pipe pipefile/mulit）
app.module.ts：
import { MultiPipe } from './pipe/multi.pipe';
declarations: [
AppComponent,
TestDemoComponent,
MultiPipe
],
HTML界面：
<div>
<p>日期：{{birthday | date: 'yyyy-MM-dd HH:mm:ss'}}</p>
<p>数字：{{3.12645 | number:'2.1-4'}}</p> '2.1-4'表示整数2位，小数最少1位，最多4位
<p>大写转小写：{{'TEST' | lowercase}}</p>
<p>大写转小写：{{'test' | uppercase}}</p>
<p>自定义管道；{{ 4 | multi}}</p>
<p>自定义管道；{{ 4 | multi: 5}}</p>
</div>
ts：
public birthday: Data = new Date();
image.png
例子：自定义管道
filter管道：ng g pipe pipe/filter
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'filter'
})
export class FilterPipe implements PipeTransform {
transform(list: any[], field: string, keyword: string): any {
if (!field || !keyword) {
return list;
}
return list.filter(
item => {
let val = item[field];
return val.indexOf(keyword) >= 0;
}
);
}
}
界面：
<div class="col-md-4 col-sm-4 col-lg-4" *ngFor="let product of products | filter:'title':keyWord ">
<div class="thumbnail" >
<img src="http://placehold.it/320*150" class="productimg" alt="">
<div class="caption">
<h4 class="pull-right">{{product.price}}</h4>
<h4 class=""><a [routerLink]="['/product', product.id]">{{product.title}}</a></h4>
<p>{{product.desc}}</p>
</div>
<div>
<app-stars [rating]="product.rating"></app-stars>
</div>
</div>
</div>
