Угловая труба 2+ для добавления нулей и запятой

Question

Есть ли способ добавить 3 нуля к введенному значению через канал?

Например, если пользователь вводит 1, отображаемое значение будет 1000.

Или 99 -> 99,000

Я попытался возиться с Числовым каналом , но я не могу заставить его добавить правильное число нулей или использовать запятую.

Это лучший способ сделать это с помощью пользовательского канала?

Спасибо

Answer 1

@ Chellapan дал правильный ответ, мой просто показывает, если вы хотите только добавить «, 000» к каждому отображаемому числу.

 import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
  name: 'customNumber'
})
export class CustomNumberPipe implements PipeTransform {

  transform(value: any, args?: any): any {
    let x = `${value},000`
    return res;
  }

}

Answer 2

Правильный и заданный по умолчанию способ, начиная с angular 4:

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

digitInfo - это строка в следующем формате: {minIntegerDigits}. {MinFractionDigits} - {maxFractionDigits}

minIntegerDigits - это минимальное количество целых чисел, которое нужно использовать.Defaults to 1.

minFractionDigits - минимальное количество цифр после дроби.Defaults to 0.

maxFractionDigits - максимальное количество цифр после дроби.Defaults to 3.

---

Поскольку угловые 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';
}

---

Вы хотите отформатировать число с культурой в функции, это возможно начиная с угла 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 currentCulture: string = this.languageService.getCurrentCultureInstant();
    const formattedNumber = formatNumber(num, currentCulture, digitsInfo);
    return formattedNumber;
}

---

Вы хотите снова проанализировать строку в число :

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

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

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

    return parseFloat(normalizedString);
}

Answer 3

Создание пользовательской трубы

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

@Pipe({
  name: 'customCurrency'
})
export class CustomCurrencyPipe implements PipeTransform {

  transform(value: any, args?: any): any {
    let x = value.toString() + '000';
    var lastThree = x.substring(x.length - 3);
    var otherNumbers = x.substring(0, x.length - 3);
    if (otherNumbers != '')
      lastThree = ',' + lastThree;
    var res = otherNumbers.replace(/\B(?=(\d{2})+(?!\d))/g, ",") +    lastThree;
    return res;
  }

}

Пример: https://stackblitz.com/edit/angular-kgkqk3