Question

我已经用角4写了一个自定义管道。基本上我看的是如果数字是12.23百万，那么它应该显示例如12.2M（小数点后一位）。如果数字是50,000.123那么50.1K。请注意，对于负数也应该这样做并考虑小数。

import { Component, OnInit, Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'numberFormat'
})
export class NumberformatComponent implements PipeTransform {

  constructor() { }

   transform(number : any){
    if(number == 0) {
    return 0;
      }
      else
      {        
        // hundreds
        if(number <= 999){
          return number ;
        }
        // thousands
        else if(number >= 1000 && number <= 999999){
          return (number / 1000) + 'K';
        }
        // millions
        else if(number >= 1000000 && number <= 999999999){
          return (number / 1000000) + 'M';
        }
        // billions
        else if(number >= 1000000000 && number <= 999999999999){
          return (number / 1000000000) + 'B';
        }
        else
          return number ;
        }
    }

}

Answer 1

您实际上完成了一半的实施。这里要添加的一件事是负数的条件，你可以通过检查字符串的起始字符为“ - ”来做到这一点，你也可以使用Fixed（1）;将小数加到固定为1，< / p>

这是完整的管道实现，

import { Component, OnInit, Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'numberFormat'
})
export class NumberformatComponent implements PipeTransform {

  constructor() { }

   transform(number : any){
    let hasMinus = String(number).charAt(0) === '-' ? true:false;
    number =  String(number).charAt(0) === '-' ?
            + String(number).substring(1, number.length)  : number;
        // hundreds
        if(number <= 999){
          number = number ;
        }
        // thousands
        else if(number >= 1000 && number <= 999999){
          number = (number / 1000).toFixed(1) + 'K';
        }
        // millions
        else if(number >= 1000000 && number <= 999999999){
          number = (number / 1000000).toFixed(1) + 'M';
        }
        // billions
        else if(number >= 1000000000 && number <= 999999999999){
          number = (number / 1000000000).toFixed(1) + 'B';
        }
        if(hasMinus){
          return '-'+number;
        }else
        {
          return number;
        }
    }

}

<强> STACKBLITZ DEMO

以angular4显示数字格式

1 个答案: