angular管道

管道的使用

1、花括号的形式

{{ 输入数据 | 管道 : 管道参数 }}

2、属性的形式

<input type="text" [value]="val | date"/>

3、指令的形式

<li *ngFor="let item of items | 管道 : 管道参数">{{item.name}}</li>

内置管道

管道名	用途
date	日期管道，格式化日期
json	将输入数据对象经过JSON.stringify()方法转换后输出对象的字符串
uppercase	将文本所有小写字母转换成大写字母
lowercase	将文本所有大写字母转换成小写字母
number	将数值按特定的格式显示文本
percent	将数值转百分比格式
currentcy	将数值进行货币格式化处理
slice	将数组或者字符串裁剪成新子集

date

	export class AppComponent {
		 public val=new Date()
	}
		{{ val |  date:'yyyy/MM/dd'}}

json

	export class AppComponent {
		 public val=[
    {name:'王五',val:15},
    {name:'赵六',val:54},
    {name:'张三',val:64},
    {name:'李四',val:43},
  ];
	}
		{{ val |  json}}

uppercase

	export class AppComponent {
		 public val='asdfg'
	}
		{{ val |  uppercase}}

lowercase

	export class AppComponent {
		 public val='ASDFG'
	}
		{{ val |  lowercase}}

number

{{ val | number:“minIntegerDigits.minFractionDigits-maxfractionDigits”}}

1. minIntegerDigits：整数部分保留最小的位数，默认值为1.
2. minFractionDigits：小数部分保留最小的位数，默认值为0.
3. maxFractionDigits：小数部分保留最大的位数，默认值为3.

	export class AppComponent {
		 public val=1.2345646461
	}
	{{val | number:'4.3-6' }}
	// 0,001.234565

percent

number参数一样可以使用

	export class AppComponent {
		 public val=1.2345646461
	}
		{{ val |  percent:'4.3-6'}}
		//0,123.456465%

currency

{{ val | number:currentcyCode:symbolDisplay:digitInfo}}

1. 参数currentcyCode：表示要格式化的目标货币格式，值为ISO 4217货币码，如CNY人民币、USD美元、EUR欧元等。
2. 参数symbolDisplay：表示以该类型货币的哪种格式显示，值为布尔值，true表示显示货币符号如￥、$等，false表示显示ISO 4217货币码如CNY、USD等。
3. digitInfo参考number管道参数。

	export class AppComponent {
		 public val=1.2345646461
	}
		{{val| currency:'CNY':'￥':'3.1-2'}}
		//CN¥001.23

自定义管道

使用命令

ng g p search

	import { Pipe, PipeTransform } from '@angular/core';
	
	@Pipe({
	  name: 'search'
	})
	export class SearchPipe implements PipeTransform {
	
	  transform(value: any, args?: any): any {
	    return null;
	  }
	}

value：传入的值，args：可选，传入的参数

创建一个过滤管道

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'search'
})
export class SearchPipe implements PipeTransform {

  transform(list: any[], filed: string,kework:string): any {
    if(!filed||!kework){
      return list
    }
    return list.filter(item=>{
      let itemfiler=item[filed].toLowerCase()
      return itemfiler.indexOf(kework)>=0
    })
  }

}

filed：表示的是根据什么属性查询，
kework：表示的比对的值

<input type="text" name="user" [(ngModel)]="val"/>
<ul>
  <li *ngFor="let item of items | search:'name':val">{{item.name}}</li>
</ul>