Как отобразить символ валюты справа в Angular 2

Ответ 1

Начиная с версии Angular2 RC6 вы можете установить локаль по умолчанию непосредственно в своем модуле (поставщиках) приложения:

import {NgModule, LOCALE_ID} from '@angular/core';

@NgModule({
  providers: [{
      provide: LOCALE_ID,
      useValue: 'de-DE' // 'de-DE' for Germany, 'fr-FR' for France ...
    },
  ]
})

Затем валютная труба должна забрать настройки локали и переместить символ вправо:

@Component({
  selector:"my-app",

  template:`
    <h2>Price:<h2>
     {{price|currency:'EUR':true}}
  `
})

Ответ 2

Формат денежной трубы контролируется текущими правилами локали. См. Также Использование труб:

Каналам даты и валюты нужен API интернационализации ECMAScript. Safari и другие старые браузеры не поддерживают его. Мы можем добавить поддержку с помощью polyfill.

<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=Intl.~locale.en"></script>

Под капотом CurrencyPipe делегирует форматирование new Intl.NumberFormat(locale, options).format(num);.

Intl.NumberFormat Использование параметров:

var number = 123456.789;

// request a currency format
console.log(new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(number));
// → 123.456,79 €

// the Japanese yen doesn't use a minor unit
console.log(new Intl.NumberFormat('ja-JP', { style: 'currency', currency: 'JPY' }).format(number));
// → ￥123,457

Другими словами, форматирование валют с помощью CurrencyPipe включает в себя:

• Использование правильной локали. См. о том, как заменить стандартную локаль, но это должно быть необходимо только для тестирования, поскольку ожидается, что у пользователей будет установлен правильный языковой стандарт в настройках ОС.
• И используя polyfill для старых браузеров.

Ответ 3

Честно говоря, я не смог найти встроенный способ сделать это. Итак, созданный пользовательский канал называется split.

рабочая демонстрация: http://plnkr.co/edit/KX7hfaV2i7CX2VFobM8R?p=preview

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

@Pipe({name:'split'})
export class ShiftPosition implements PipeTransform {
  transform(items: any[], value: string): string {
      return items.substr(1)+' ' +items.substr(0,1);
  }
}


@Component({
  selector:"my-app",

  template:`
    <h2>Dashboard<h2>
     {{price|currency:'EUR':true|split:price}}
  `
})

export class AppComponent{      
  price=10;
}

Ответ 4

Предоставить LOCALE_ID не было решением, потому что мое приложение написано на английском языке, но показывает валюту с французским языковым стандартом. Поэтому, если я установил свой LOCALE_ID на fr-FR, все мои даты на французском языке, что неприемлемо.

Поэтому я просто выбираю десятичный канал, затем добавляю символ в конце.

<div>
    {{ document.totalTaxAmount | number:'1.2-2' }} EUR
</div>

Проблема здесь, если число не определено, вы получите только символ. Чтобы решить эту проблему, я создал пустой канал:

@Pipe({
    name: 'notEmpty'
})
export class NotEmptyPipe implements PipeTransform {
    transform(value: any, replaceWith: any = ""): any {
        if (!value) {
            return replaceWith;
        }
        return value;
    }
}

И используйте его следующим образом:

<div>
    {{ document.totalTaxAmount | number:'1.2-2' | notEmpty: '0' }} EUR
</div>

Ответ 5

Сделайте это так:

{{price | currency:'EUR':true:'1.0-0'}}

Нет необходимости в дополнительных трубах, он использует валюту по умолчанию