angular - 角度缩短数

Question

我正在开发一个角度应用程序。我需要显示的数字很少。这些数字可以是 1234567.87876868。在显示此数字时，我需要以 12.9k 之类的格式显示，而我在此表单中生成数字的代码是

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

@Pipe({
    name: 'number'
})
export class numberPipe implements PipeTransform {

    transform(number: number, args?: any): any {
        if (isNaN(number)) return 0; // will only work value is a number
        if (number === null) return 0;
        if (number === 0) return 0;
        let abs = Math.abs(number);
        const rounder = Math.pow(10, 1);
        const isNegative = number < 0; // will also work for Negetive numbers
        let key = '';

        const 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, 5)},
            {key: 'K', value: 1000}
        ];

        for (let i = 0; i < powers.length; i++) {
            let 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;
    }
}

在 html 中<div>{{ mynumber | number}}<div>现在的问题是，如果数字小于 1000，它会显示原始数字，并且显示像这样的 345.4354564，在屏幕上看起来不太好。所以我需要使用数字管道( number: '1.2-2')。但是当我将数字管道与我的自定义管道一起使用时，它不起作用。它说“12.4K 不是管道 Decimalpipe 的数字”。我该如何处理这两种情况？

标签： angularangular-pipe

Answer 1

我过去遇到过同样的问题，我发现最好的解决方案是使用Math.log.

@Pipe({
  name: 'number',
})
export class NumberPipe implements PipeTransform {
  transform(input: number, args?: any): string | number | null {
    let exp: number;
    const suffixes = ['K', 'M', 'B', 'T', 'Q', 'E'];

    if (Number.isNaN(input)) {
      return null;
    }

    if (Math.abs(input) < 1000) {
      return input;
    }

    exp = Math.floor(Math.log(input) / Math.log(1000));

    return (input / Math.pow(1000, exp)).toFixed(args) + suffixes[exp - 1];
  }
}

PS：我确定我在堆栈溢出的某个地方找到了它，但我找不到原来的答案:(