angular数字管道
为了提高可读性而不是经常显示全数字,需要显示缩短的数字。 这是一个如何在Angular8中创建自己的可自定义短号管道的示例。
什么是管道?
Angular中的Pipe是一个数据处理元素,用于表示层(在模板中)。 所有管道必须实现PipeTransform接口。 PipeTransform接口包含一个名为“ transform() ”的方法,该方法由Angular调用,将值作为第一个参数传递,并将可选参数作为第二个参数传递。
管道可以连接到一组管道中。 在这种情况下,前一个管道的输出将输入到下一个管道。
![](https://i-blog.csdnimg.cn/blog_migrate/1f7d8976eb2998bef1e6b769a5d5d6d5.png)
{{item.count | shortNumber}}是一个示例,说明如何在模板中使用管道来更改item.count表示形式。
创建一个自定义管道
任务 :在视图中显示文本“ 1.5M”,而不是1500000。
解决方案 :生成自定义管道并实现短号功能。
在pipes /目录中生成新的shortNumber管道的命令:
ng generate pipe pipes/shortNumber
上面的命令创建pipes / short-number.pipe.ts文件并注册ShortNumberPipe 在模块声明中。
// short-number.pipe.ts
import { Pipe, PipeTransform } from '@angular/core' ;
@Pipe ({
name: 'shortNumber'
})
export class ShortNumberPipe implements PipeTransform {
transform(value: any , args?: any ): any {
return null ;
}
}
ShortNumberPipe类必须实现PipeTransform接口,该接口是所有Angular管道的通用接口。
PipeTransform接口需要实现单个transform()方法。 请参阅下面的短号功能实现。
transform(value:any , args?: any ): any {
if (value === null ) return null ;
if (value === 0 ) return "0" ;
var fractionSize = 1 ;
var abs = Math .abs(value);
var rounder = Math .pow( 10 , fractionSize);
var isNegative = value < 0 ;
var key = '' ;
var powers = [{ key: "Q" , value: Math .pow( 10 , 15 ) }, { key: "T" , value: Math .pow( 10 , 12 ) }, { key: "B" , value: Math .pow( 10 , 9 ) }, { key: "M" , value: Math .pow( 10 , 6 ) }, { key: "k" , value: 1000 }];
for ( var i = 0 ; i < powers.length; i++) {
var reduced = abs / powers[i].value;
reduced = Math .round(reduced * rounder) / rounder;
if (reduced >= 1 ) {
abs = reduced;
key = powers[i].key;
break ;
}
}
return (isNegative ? '-' : '' ) + abs + key;
}
在上面的示例中,“ Q ”代表四分位数,“ T ”-万亿,“ B ”-十亿,“ M ”-百万,“ k ”-千克。
硬编码的fractionSize定义了舍入数字的精度。 欢迎您根据需要进行调整。
测试用法
让我们用这段html检查结果:
< span class = ”cnt-wrap” > {{1500000 | shortNumber}} </ span >
插值后显示1.5M。 如果用15300替换1500000,则数字转换的结果将为15.3k。
做完了!
去做
作为作业,请对shortNumber管道进行参数设置。 例如,您可以通过将fractionSize作为参数传递来执行此操作。 查看文档以寻求帮助。
更改之后, {{1520000 | shortNumber:2}}必须产生1.52M( fractionSize设置为2)。
提示 :在开始新管道之前,请检查内置管道中是否存在现有管道 ! 但是,可用管道的列表还不大。
希望本文有用! 谢谢阅读!
先前发布在https://medium.com/front-end-weekly/creating-a-short-number-format-pipe-in-angular-8a2c973c87c2
翻译自: https://hackernoon.com/creating-a-short-number-format-pipe-using-angular8-9h9u32rg
angular数字管道