Währungsformatierung mit einer Pipe in Angular

Mit der CurrencyPipe Pipe kann die Währungsausgabe formatiert werden. Im ersten Parameter der Pipe wird der Währungscode gemäß der ISO-4217-Spezifikation übergeben (standardmäßig USD). Im zweiten Parameter legen wir die Darstellung der Währung fest. Es kann die folgenden Werte annehmen: 'code' (Währungscode), 'symbol' (ihr Symbol), 'symbol-narrow' (für Länder, die mehrere Währungssymbole haben), 'string' (zur Ausgabe einer beliebigen Zeichenkette). Im dritten optionalen Parameter können wir das Zahlenformat festlegen, ähnlich der DecimalPipe Pipe. Im vierten optionalen Parameter kann der Code des verwendeten Locale angegeben werden:

<div>{{ value | number : Währungscode : Währungsdarstellung : Zahlenformat : Locale-Code }}</div>

Beispiele

Lassen Sie uns die Funktionsweise der Pipe an Beispielen testen. Dazu legen wir in der Komponentenklasse die folgende Eigenschaft salary fest, die ein Gehalt in einer bestimmten Währung enthält:

export class AppComponent {
	salary: number = 867.564;
}

Beispiel

Lassen Sie uns unsere Zahl in eine Währung umwandeln:

<div>{{ salary | currency }}</div>

Ergebnis der Codeausführung:

<div>$867.56</div>

Beispiel

Lassen Sie uns nun die Währungsdarstellung in russischen Rubel angeben:

<div>{{ salary | currency:'RUB':'code' }}</div>

Ergebnis der Codeausführung:

<div>RUB867.56</div>

Beispiel

Lassen Sie uns neben der Zahl das Symbol des russischen Rubels ausgeben:

<div>{{ salary | currency:'RUB':'symbol-narrow' }}</div>

Ergebnis der Codeausführung:

<div>₽867.56</div>

Beispiel

Lassen Sie uns nun eine Zahl mit vier Ziffern nach dem Dezimalpunkt ausgeben:

<div>{{ salary | currency:'RUB':'symbol':'2.4-5' }}</div>

Ergebnis der Codeausführung:

<div>RUB867.5640</div>

Beispiel

Lassen Sie uns der Währungsdarstellung die folgende Zeichenkette hinzufügen:

<div>{{ salary | currency:'RUB':'this is a new currency - ' }}</div>

Ergebnis der Codeausführung:

<div>this is a new currency - 867.56</div>