javascript - Angular 2+ 管道附加零和逗号

Question

有没有办法通过管道将 3 个零附加到输入的值？

例如，如果用户输入 1，则显示的值为 1,000。

或 99 -> 99,000

我尝试摆弄 Number pipe ，但我无法让它添加正确数量的零，或使用逗号。

使用自定义管道是最好的方法吗？

谢谢

Answer 1

自 Angular 4 以来正确且默认的方式:

<p>{{99 | number:'1.3-3'}}</p>
<!--output '99.000'-->

digitInfo is a string which has a following format: {minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}

minIntegerDigits 是要使用的最小整数位数。 默认为 1。

minFractionDigits 是小数后的最小位数。 默认为 0。

maxFractionDigits 是小数后的最大位数。 默认为 3。

---

从 Angular 5 或 6(不确定)开始，您还可以提供文化。

<p>{{99 | number:'1.3-3':CultureType.de_DE}}</p>
<!--output '99,000'-->

要使用不同的文化，请不要忘记导入语言环境。

import { registerLocaleData } from "@angular/common";

import localeDe from '@angular/common/locales/de';
import localeFr from '@angular/common/locales/fr';
import localeNl from '@angular/common/locales/nl';
import localeEnGb from '@angular/common/locales/en-GB';
import localeEnUs from '@angular/common/locales/en';

registerLocaleData(localeDe, CultureType.Development);
registerLocaleData(localeFr, CultureType.fr_FR);
registerLocaleData(localeNl, CultureType.nl_NL);
registerLocaleData(localeEnGb, CultureType.en_GB);
registerLocaleData(localeEnUs, CultureType.en_US);
registerLocaleData(localeDe, CultureType.de_DE);

export class CultureType {
    public static readonly Development: 'xh-ZA' = 'xh-ZA';
    public static readonly de_DE: 'de-DE' = 'de-DE';
    public static readonly nl_NL: 'nl-NL' = 'nl-NL';
    public static readonly fr_FR: 'fr-FR' = 'fr-FR';
    public static readonly en_GB: 'en-GB' = 'en-GB';
    public static readonly en_US: 'en-US' = 'en-US';
}

---

您想要在函数中使用文化来格式化数字，从 Angular 6 开始这是可能的:

import { formatNumber, getLocaleNumberSymbol, NumberSymbol } from "@angular/common";

/**
 * DigitsInfo:
 * {minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}
 * 1.2-2 => 1,00
 */
public formatNumber(num: number, digitsInfo: string): string {
    const culture: string = this.languageService.getCulture();
    return formatNumber(num, culture, digitsInfo);
}

---

您想要再次将字符串解析为数字:

import { formatNumber, getLocaleNumberSymbol, NumberSymbol } from "@angular/common";

public parseStringNumber(str: string): number | null {
    if (!str) {
        return null;
    }

    const culture: string = this.languageService.getCulture();
    const decimalSeparator: string = getLocaleNumberSymbol(culture, NumberSymbol.Decimal);
    const groupSeparator: string = getLocaleNumberSymbol(culture, NumberSymbol.Group);
    const decimalSeparatorRegex = new RegExp('\\' + decimalSeparator, 'g');
    const groupSeparatorRegex = new RegExp('\\' + groupSeparator, 'g');
    const normalizedString = str.replace(groupSeparatorRegex, '').replace(decimalSeparatorRegex, '.');

    return parseFloat(normalizedString);
}