В angular 2, Как отобразить число в виде двух десятичных округленных валют?

примеры:

  • 1.99 --> 1.99$
  • 1.9 --> $1.90
  • 1 --> 1.00$
  • 1.005 --> 1.01$
  • 1.004 --> $1.00

Я использую {{num | currency:'USD':true}} но он не показывает трейлинг 0s.

31
angular currency filter rounding

6 ответов

используйте этот код. Вот рабочий пример http://plnkr.co/edit/xnN1HnJtTel6WA24GttR?p=preview {{num | currency:'USD':true:'1.2-2'}}

объяснение :
number_expression / number [: digitInfo]

наконец, мы получаем десятичное число в виде текста. Найти описание.

number_expression: угловое выражение, которое выдаст выходное число.

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

digitInfo: он определяет формат номера.

теперь мы поймем, как использовать digitInfo. Синтаксис для digitInfo следующий.

{minIntegerDigits}.{minFractionDigits} - {maxFractionDigits}

найти описание.

minIntegerDigits: минимальное количество целых цифр. По умолчанию-1. (в нашем случае 1)

minFractionDigits: минимальное количество цифр дробной части числа. По умолчанию-0. (в нашем случае 2)

maxFractionDigits: максимальное количество цифр дробной части числа. По умолчанию-3. (в нашем случае 2)

78

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

прежде всего есть количество труб, доступных angular2 для использования в нашем проекте некоторые из них перечислены ниже

CurrencyPipe, DatePipe, UpperCasePipe, LowerCasePipe и PercentPipe и многое другое.

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

CurrencyPipe:

труба может признавать любое количество опционных параметров для того чтобы точно настроить свой выход. Мы добавляем параметры в канал, следуя имени канала с двоеточием (:), а затем значение параметра (например, валюта:'EUR'). Если наша труба принимает несколько параметров, мы разделяем значения двоеточиями (например, slice:1:5).

{{number / currency: 'your_type': true:'1.2-2'}}

здесь...первый параметр-тип валюты, который является либо EUR, USD или что - нибудь еще, второй параметр true/false для symbolDisplay имеет значение false по умолчанию. тогда третий-Предел Диапазона в основном Предел Диапазона . Вы можете установить минимальную и максимальную длину после запятой и фиксированным числом (или оставить его пустым по умолчанию) места перед запятой.

Я нашел несколько хороших учебников для труб в angular2, которые я публикую здесь..

http://voidcanvas.com/angular-2-pipes-filters/

https://angular.io/docs/ts/latest/guide/pipes.html

надеюсь, что это поможет и прояснит больше о трубах !! @ Pardeep !!

19

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

{{num | currency:'USD':true}} должно быть...

{{num | currency:'USD':true:'1.2-2'}}

Для справки: 'USD' представляет тип валюты, true представляет, показывать ли символ валюты ( $ ) и '1.2-2' представляет информацию о цифре.

цифра информация {minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}.

minIntegerDigits - минимальное количество целых цифр для использования и по умолчанию равно 1.
minFractionDigits is минимальное количество цифр после дроби и по умолчанию равен 0.
maxFractionDigits максимальное количество цифр после дроби и по умолчанию равен 3.

источник цифровой информации можно найти здесь:https://angular.io/docs/ts/latest/api/common/index/DecimalPipe-pipe.html

11

если, как и я, вы пытаетесь сделать это в typescript / javascript, а не HTML, вы также можете использовать методом tolocalestring

чтобы преобразовать число в строку валюта:

  ppCurrency(number) {
   return number.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
  }
7

следующее преобразуется с 2 десятичными цифрами

{{num | currency : '$' : 2}}

угловое 2

{{num | currency:'USD':true:'1.2-2'}}
5
<input type="number" [(ngModel)]="myModel" (keyup)="onBlurMethod()">
<br>
<br> The formatted currency is :
<br> {{myModel | currency:'USD':true:'1.2-2' }}

вот рабочий пример.

http://plnkr.co/edit/pSK8p7u3oo4WsAB9aFBS?p=preview

1