Угловой
Форматировать валюту в Angular
Руководство по преобразованию чисел в форматированную валюту в Angular
В этой статье я покажу вам, как работать с валютой в Angular.
- ВалютаТрубка
- Использование CurrencyPipe в HTML
- Использование CurrencyPipe в TypeScript
Чтобы получить больше подобного контента, посетите https://betterfullstack.com
ВалютаТрубка
CurrencyPipe преобразует число в строку валюты, отформатированную в соответствии с правилами локали. Это определяет размер группы и разделитель, десятичный знак и другие конфигурации, зависящие от локали.
Вот реализация от @angular/common:
Вы можете прочитать описание выше, чтобы узнать больше о каждом параметре.
Использование CurrencyPipe в HTML
В этом разделе я приведу примеры того, как работает валюта в шаблонах Angular HTML.
В каждом примере будет использоваться одна и та же настройка шаблона:
Сначала установим claimMoney на 1. Это даст следующие результаты:
1 $1.00 ₫1 VND0,001.00 // this because I set min integer to 4 ₫0,001.00 // this because I set min integer to 4 ₫0,001.00 // this because I set min integer to 4
Теперь установите claimMoney на 1000.
1000 $1,000.00 ₫1,000 VND1,000.00 ₫1,000.00 ₫1,000.00
Наконец, установите claimMoney на '1,000'. CurrencyPipe ожидает, что значение будет числом или преобразовано в число с помощью JavaScript. Поскольку в нашей строке есть запятая ,, она не распознается как число и при анализе станет NaN.
Я получаю сообщение об ошибке. Это означает, что CurrencyPipe НЕ принимает запятую в value:any выше.
Использование CurrencyPipe в TypeScript
Много раз мне приходилось обрабатывать валюту внутри компонента Angular, который представляет собой .ts файл.
Вот пример проблемы. Я вызываю один API, и он возвращает число и формат 1110.5. Затем мне нужно вставить его в форму. Затем я разрешаю пользователю редактировать это число и отправлять результат на сервер.
Сначала введите CurrencyPipe в constructor:
constructor(private currencyPipe : CurrencyPipe, private fb: FormBuilder){}
Затем я форматирую число и вставляю это значение в форму ngOnInit() жизненного цикла:
ngOnInit() {
this.claimMoney = 1000.12; // this value get from API
this.claimForm = this.fb.group({
total: [ this.formatMoney(this.claimMoney), Validators.required]
});
}
formatMoney(value) {
const temp = `${value}`.replace(/\,/g, "");
return this.currencyPipe.transform(temp).replace("$", "");
}
Чтобы получить преобразованный результат, я добавил один метод под названием transformTotal():
transformTotal() {
const value = this.claimForm.controls.total.value;
this.claimForm.controls.total.setValue(
this.formatMoney(value.replace(/\,/g, "")),
{emitEvent: false}
);
}
Он будет вызываться из ввода в шаблоне компонента.
Резюме
В этой статье был представлен простой способ работы с валютой в Angular. Это помогает сократить время и количество ошибок разработчика при внедрении форматирования валюты в ваше приложение.
Надеюсь, эта статья оказалась для вас полезной! Вы можете связаться со мной на моем сайте. Не стесняйтесь оставлять любые вопросы в комментариях ниже. Буду рад помочь!
Проверьте исходный код здесь.
Ресурсы / Ссылки
[1]: Angular CurrencyPipe https://angular.io/api/common/CurrencyPipe#ngmodule
