angular2 --使用DecimalPipe格式化数字

官方doc说明:http://angular2.axuer.com/docs/ts/latest/api/common/index/DecimalPipe-pipe.html

使用方法:number_expression | number[:digitInfo];

digitInfo是如下个格式:{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits};

minIntegerDigits:要使用的最小数字的整数位数。默认为1;

minFractionDigits:小数点后的最小位数。默认为0;

maxFractionDigits:小数点后的最大位数。默认为3;

eg:

@Component({
  selector: 'number-pipe',
  template: 
                `<div>
                      <p>price (no formatting): {{price}}</p>
                      <p>price (2.1-5): {{price | number:'2.1-5'}}</p>
                      <p>price (3.2-4): {{price | number:'3.2-4'}}</p>
                  </div>`
})
export class NumberPipeComponent {
  price: number = 3.1415926;
}    

输出结果如下: price (no formatting):
3.1415926 price (2.1-5): 03.1 price (3.2-4): 003.14

angular2相比angularJs的filter更加灵活些 angularjs的的number过滤器使用方法:{{ num | number : 2 }}


posted @ 2017-06-12 15:05  会捕鼠的鱼  阅读(3803)  评论(0编辑  收藏  举报