Angular 2 CurrencyPipe Leerzeichen zwischen Währung und Nummer?

Question

Ich habe festgestellt, dass es in Angular 2 eine Pipe namens CurrencyPipe gibt, die einige Dezimalstellen von einer Zahl filtert. Dadurch wird auch der ISO-Währungsindikator "USD" oder eine andere lokale Währung hinzugefügt.

Mein Problem ist, dass die Ausgabe wie folgt angezeigt:

USD123 

Ohne Raum zwischen USD und 123, das ist wirklich das bevorzugte Verhalten? Muss ich dafür eine eigene Pipe schreiben oder kann ich etwas hinzufügen? Hier

ist ein Code:

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

Answer 1

Das ist nicht möglich, da die CurrencyPipe beruht auf Intl.NumberFormat und es gibt keine Möglichkeiten.

Das heißt Sie wechseln $ statt USD mit dem symbolDisplay Parameter true gesetzt anzuzeigen:

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

Dies zeigt folgendes an: $123, die ein bisschen besser ist ;-) Wenn dies nicht zusagt , müssen Sie eine benutzerdefinierte Rohr implementieren Ihre Nummer zu formatieren ...

diese Links für mehr Details:

• https://github.com/angular/angular/blob/master/modules/angular2/src/facade/intl.ts#L70
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat

Answer 2

Sie können dieses Problem ein wenig klug CSS lösen mit der first-letter pseudo element verwenden, um eine Klasse zu Ihrer Spanne hinzufügen:

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

und in Ihrem css add:

.price { 
    display: inline-block; 
} 

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

Die erste Regel stellt sicher, dass Ihr Preis in einem Block Container-Box (::first-letter funktioniert auf inline Anzeige Blöcke), und die zweite Regel fügt ein bisschen zusätzliche Polsterung nach dem Währungssymbol.

Sie können diese zwicken nach Ihren Wünschen ...

Answer 3

Benötigen Sie wirklich Währung Rohr benutzen? Sie können jederzeit die Währung von der Menge trennen:

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

oder in Ihrem Fall:

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

Answer 4

Ihr eigene Währung Rohr machen.

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; 
    } 
} 

und verwenden Sie es in HTML wie

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

Answer 5

können Sie das Rohr außer Kraft setzen wie folgt. Stellen Sie sicher, dass Sie dies in das Modul einbinden

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 = currency_format.search(/\d/); 
    return currency_format.substring(0, firstDigit) + ' ' + currency_format.substr(firstDigit); 
    } 
}