DecimalPipe用法

[deepthan]

使用方法：

number_expression(value) | number[:digitInfo[:locale]]

 {{   e  | number:'3.1-5'}}
{{ 数字 | number :'限定的范围' }}

作用

根据给定的范围，将数字转换为符合格式的文本。

• value值是一个数字类型

• digitInfo 是一个字符串形如：
  {minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}

  • minIntegerDigits: 设置整数的最小位数。默认是1位。
  • minFractionDigits：设置小数点后的最小位数。默认值为0。
  • maxFractionDigits ：设置小数点后的最大位数。默认为3。

• locale 是定义要使用的语言环境的字符串(默认使用当前的LOCALE_ID)。

示例

@Component({
  selector: 'number-pipe',
  template: `<div>
    <!--  num1 = 3.14，num2 = 2.718281828459045; -->
    
    <!-- 没有做转换，使用默认的转换系数 ‘1.3-0’，即整数最少为1位，小数点为0-3位 -->
    <p>{{num1 | number}}</p> <!-- 输出 '3.14'-->
    <p>{{num2 | number}}</p> <!-- 输出 '2.718'-->
    
    <!-- 整数最少3位，小数1到5位-->
    <p> {{num1 | number:'3.1-5'}}</p>  <!-- 输出 '003.14 '-->
    <p> {{num2 | number:'3.1-5'}}</p> <!--输出 '002.71828'-->
    
    <!-- 整数最少4位，小数5位-->
    <p>e (4.5-5): {{num1 | number:'4.5-5'}}</p><!--输出 '0,003.14000'-->
    <p>pi (3.5-5): {{num2 | number:'4.5-5'}}</p><!--输出 '0,002.71828'-->
    <!-- 'fr'是 LOCALE_ID -->
    <p>e (french): {{num2 | number:'4.5-5':'fr'}}</p><!--输出 '0 002,71828'-->
  </div>`
})
export class NumberPipeComponent {
  num1: number = 3.14;
  num2: number = 2.718281828459045;
}