angular数字管道_使用Angular8创建短数字格式管道

angular数字管道

为了提高可读性而不是经常显示全数字，需要显示缩短的数字。 这是一个如何在Angular8中创建自己的可自定义短号管道的示例。

什么是管道？

Angular中的Pipe是一个数据处理元素，用于表示层（在模板中）。 所有管道必须实现PipeTransform接口。 PipeTransform接口包含一个名为“ transform（） ”的方法，该方法由Angular调用，将值作为第一个参数传递，并将可选参数作为第二个参数传递。

管道可以连接到一组管道中。 在这种情况下，前一个管道的输出将输入到下一个管道。

{{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数字管道