angular--常见管道

• 日期格式转换（date）
• 数字（number）
• 大小写转换（uppercase、lowercase）
• 自定义管道（ng g pipe pipefile/mulit）

app.module.ts：
import { MultiPipe } from './pipe/multi.pipe';

declarations: [
    AppComponent,
    TestDemoComponent,
    MultiPipe
  ],

HTML界面：

  
日期：{{birthday | date: 'yyyy-MM-dd HH:mm:ss'}}
  
数字：{{3.12645 | number:'2.1-4'}}
  '2.1-4'表示整数2位，小数最少1位，最多4位
  
大写转小写：{{'TEST' | lowercase}}
  
大写转小写：{{'test' | uppercase}}
  
自定义管道；{{ 4 | multi}}
  
自定义管道；{{ 4 | multi: 5}}


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;
      }
    );
  }

}

界面：

  

    
    

      
{{product.price}}
      
{{product.title}}
      
{{product.desc}}