Angular 2 CurrencyPipe пространство между валютой и номером?

Я заметил, что есть труба под названием CurrencyPipe в Angular 2, которая будет фильтровать некоторые десятичные числа из числа. Это также добавляет индикатор валюты ИСО, то есть "доллар США" или любую другую местную валюту.

Моя проблема в том, что вывод отображается следующим образом:

USD123

Без пробела между USD и 123 это действительно предпочтительное поведение? Должен ли я писать свою собственную трубу для этого или есть что-то, что я могу сделать, чтобы добавить пробел?

Вот какой код:

<span>{{ product.price | currency:'USD' }}</span>

Ответы

Ответ 1

Это невозможно, так как CurrencyPipe полагается на Intl.NumberFormat, и для этого нет никаких параметров.

Тем не менее, вы можете переключиться на отображение $ вместо USD с параметром symbolDisplay, установленным на true:

<span>{{ product.price | currency:'USD':true }}</span>

Это отобразит: $123, что немного лучше;-) Если это вас не устраивает, вам нужно реализовать собственный канал для форматирования вашего номера...

См. эти ссылки для более подробной информации:

Ответ 2

Вы можете решить эту проблему, используя немного умного CSS, используя псевдоэлемент из первой буквы, добавив класс в ваш span:

<span class="price">{{ product.price | currency:'USD':true }}</span>

и в вашем CSS добавить:

.price {
  display: inline-block;
}

.price::first-letter {
  padding-right: 0.3em;
}

Первое правило гарантирует, что ваша цена в блоке контейнера блока (::first-letter работает на inline блоках отображения), а второе правило добавляет немного дополнительного отступа после символа валюты.

Вы можете настроить это по своему вкусу...

Ответ 3

Вам действительно нужно использовать валютную трубку? Вы всегда можете отделить валюту от суммы:

<span class="price">{{ product.currency }} {{ product.price|number:'1.2-2'}}</span>

или в вашем случае:

<span class="price">USD {{ product.price|number:'1.2-2'}}</span>

Ответ 4

Создайте собственную собственную валютную трубку.

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

@Pipe({ name: 'myCurrency' })
export class MyCurrencyPipe implements PipeTransform {
    transform(num: any, currencyCode: string, showSymbol: boolean, digits: string): any {
        let value = new CurrencyPipe(navigator.language).transform(num, currencyCode, showSymbol, digits);
        let firstDigit = value.match(/\d/);
        let symbol = value.slice(0, firstDigit.index);
        let amount = value.slice(firstDigit.index);   
        return symbol + " " + amount;
    }
}

и использовать его в HTML, например

{{amount | myCurrency: currencyCode :true:'1.0-2'}}

Ответ 5

Вы можете переопределить трубу следующим образом. Убедитесь, что вы включили это в модуль

import {Pipe, PipeTransform} from "@angular/core";
import {CurrencyPipe} from "@angular/common";


@Pipe({name: 'currency'})
export class MyCurrencyPipe extends CurrencyPipe implements PipeTransform {
  transform(value: any, currencyCode: string, symbolDisplay: boolean, digits: string): string {
    const currencyFormat = super.transform(value, currencyCode, symbolDisplay, digits);
    const firstDigit = currencyFormat.search(/\d/);
    return currencyFormat.substring(0, firstDigit) + ' ' + currencyFormat.substr(firstDigit);
  }
}

Ответ 6

Изменения для Angular v5 и выше

Параметр DISPLAY изменен с boolean на string

отображать строку | логический

Формат для индикатора валюты. Одно из следующего:

  • Код: Показать код (например, USD).
  • Символ (по умолчанию): Показать символ (например, $).
  • символ-узкий: используйте узкий символ для локалей, которые имеют два символа для своей валюты. Например, CAD канадского доллара имеет символ CA $ и символ узкого $. Если в локали нет узкого символа, используется стандартный символ для локали.
  • String: использовать заданное строковое значение вместо кода или символа. Например, пустая строка будет подавлять валюту и символ.

  • Логическое (помечено как устаревшее в v5): true для символа и false для кода.

    Необязательный. По умолчанию это "символ".

Документы: https://angular.io/api/common/CurrencyPipe

Не нужно пользовательских труб

Вы можете перезаписать валюту и символ в формате строки.

String: использовать заданное строковое значение вместо кода или символа. Например, пустая строка будет подавлять валюту и символ.

<span>{{ product.price | currency:'USD ' }}</span>

Ответ 7

{{data|currency:'GBP'}} вы можете использовать вместо {{data|currency:'GBP':}}

Ответ 8

Создайте новый канал, который получает валюту в качестве входных данных.

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

@Pipe({
    name: 'space'
})
export class SpacePipe implements PipeTransform {
   transform(value: any, args?: any): any {
       console.log(value.substring(0, 1) + ' ' + value.substring( 1));
       return value.substring(0, 1) + ' ' + value.substring( 1);
   }
}

После этого вы можете назвать их так

{{discount | currency: 'EUR' | space}}

Не забудьте включить его в объявления @NgModule ->

Ответ 9

Просто введите пробел после кода валюты, например:

<span>{{ product.price | currency:'USD ' }}</span>

вместо этого,

<span>{{ product.price | currency:'USD' }}</span>

и вы получите желаемый результат... Что будет, например, USD 123