Подтвердить что ты не робот

В 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.

4b9b3361

Ответ 1

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

Объяснение:
number_expression | номер [: digitInfo]

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

number_expression: Выражение angular, которое выдаст номер.

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

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

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

{minIntegerDigits} {minFractionDigits} - {.} MaxFractionDigits

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

minIntegerDigits: Минимальное число целых цифр. Значение по умолчанию равно 1. (в нашем случае 1)

minFractionDigits: Минимальное количество цифр. Значение по умолчанию равно 0. (в нашем случае 2)

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

Ответ 2

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

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

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

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

CurrencyPipe:

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

{{number | валюта: 'your_type': верно: '1,2-2'}}

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

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

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

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

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

Ответ 3

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

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

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

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

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

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

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

Ответ 4

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

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

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

Ответ 5

Следующее преобразуется с двумя десятичными знаками

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

angular 2

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

Ответ 6

<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