1、在src目录下创建一个pipe目录用于存放自定义pipe,然后创建一个pipe
|--src
|--pipe
*****.ts
2、在ts文件里面写pipe的逻辑
import { Pipe, PipeTransform } from '@angular/core';
/*
* Raise the value exponentially
* Takes an exponent argument that defaults to 1.
* Usage:
* value | exponentialStrength:exponent
* Example:
* {{ 2 | exponentialStrength:10}}
* formats to: 1024
* 将number转换为千分位的字符串
*/
@Pipe({name: 'toNumber'})
export class ToNumberPipe implements PipeTransform {
//实现了PipeTransform类,实现transform方法,当html使用了toNumber的管道,会自动调用此方法
transform(input:number): string {
//这里可以带多个参数,第一个参数默认是原始数据,这里是指
//amount、total 、debt 、overdue ,见下html代码
return input.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");//转为千分位的正则表达式
}
}
3、在app.modules.ts中import这个ts文件,然后只需在declarations中声明。
4、在需要的Html模版中使用(不需要引入)
<ul>
<li>{{professionItem.list[0].amount | toNumber}}辆</li>
<li>{{professionItem.list[0].total | toNumber}}元</li>
<li>{{professionItem.list[0].debt | toNumber}}辆</li>
<li>{{professionItem.list[0].overdue | toNumber}}元</li>
</ul>
这样就完成了,amount等数据会传入到transform方法,然后返回的数据展示在li上。