Zahlenformatierung mit Pipes in Angular

Mit der Pipe DecimalPipe können Zahlen formatiert werden. Im ersten Parameter der Pipe übergeben wir die minimale Anzahl an Ziffern im ganzzahligen Teil. Im zweiten Parameter geben wir die minimale Anzahl an Ziffern im Nachkommateil an. Im dritten optionalen Parameter legen wir die maximale Anzahl an Ziffern im Nachkommateil fest.

Obwohl unsere Pipe DecimalPipe heißt, verwenden wir für ihren Aufruf Folgendes: number.

Probieren wir es in der Praxis aus. In der Komponenten-Klasse definieren wir die folgende Zahl:

export class AppComponent {
	num: number = 18;
}

Beispiel

Lassen Sie uns unsere Zahl so ausgeben, dass im ganzzahligen Teil zwei Ziffern vorhanden sind. Dabei soll die minimale Anzahl der Ziffern im Nachkommateil 1 betragen:

<div>{{ num | number:'2.1' }}</div>

Ergebnis der Codeausführung:

<div>18.0</div>

Beispiel

Lassen Sie uns nun festlegen, dass im Nachkommateil unserer Zahl zwei Ziffern angezeigt werden sollen:

<div>{{ num | number:'2.2' }}</div>

Ergebnis der Codeausführung:

<div>18.00</div>

Beispiel

Lassen Sie uns eine neue Zahl definieren:

export class AppComponent {
	num: number = 18.67899;
}

Und geben sie sie im HTML-Template so aus, dass im Nachkommateil maximal zwei Ziffern angezeigt werden:

<div>{{ num | number:'2.1-2' }}</div>

Ergebnis der Codeausführung:

<div>18.68</div>

Beispiel

Formatieren wir nun unsere Zahl so, dass im ganzzahligen Teil drei Ziffern sind. Und im Nachkommateil fünf Ziffern angezeigt werden:

<div>{{ num | number:'3.5-6' }}</div>

Ergebnis der Codeausführung:

<div>018.67899</div>

Beispiel

Versuchen wir, die minimale Anzahl der Ziffern im Nachkommateil auszugeben, die die gegebene Anzahl in der Zahl überschreitet. In unserem Fall geben wir sechs Ziffern aus:

<div>{{ num | number:'3.6-8' }}</div>

Als Ergebnis der Codeausführung werden wir sehen, dass die Pipe DecimalPipe eine Null zum Nachkommateil hinzugefügt hat:

<div>018.678990</div>