Memformat Nombor Menggunakan Paip dalam Angular

Dengan menggunakan paip DecimalPipe, kita boleh memformat nombor. Dalam parameter pertama paip, kita menyatakan bilangan minimum digit dalam bahagian integer. Dalam parameter kedua, kami menyatakan bilangan minimum digit dalam bahagian pecahan. Dalam parameter ketiga yang tidak wajib, kami menetapkan bilangan maksimum digit dalam bahagian pecahan.

Walaupun paip kami dipanggil DecimalPipe, untuk memanggilnya kami menulis seperti ini: number.

Mari kita cuba dalam praktik. Dalam kelas komponen, mari tetapkan nombor berikut:

export class AppComponent {
	num: number = 18;
}

Contoh

Mari output nombor kami supaya dalam bahagian integer terdapat dua digit. Pada masa yang sama, bilangan minimum digit dalam bahagian pecahan akan menjadi 1:

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

Keputusan pelaksanaan kod:

<div>18.0</div>

Contoh

Sekarang mari tetapkan supaya dalam bahagian pecahan nombor kami dipaparkan dua digit:

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

Keputusan pelaksanaan kod:

<div>18.00</div>

Contoh

Mari tetapkan nombor baru:

export class AppComponent {
	num: number = 18.67899;
}

Dan output dalam templat HTML supaya dalam bahagian pecahan dipaparkan maksimum dua digit:

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

Keputusan pelaksanaan kod:

<div>18.68</div>

Contoh

Sekarang mari format nombor kami supaya dalam bahagian integernya terdapat tiga digit. Dan dalam bahagian pecahan dipaparkan lima digit:

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

Keputusan pelaksanaan kod:

<div>018.67899</div>

Contoh

Mari cuba output bilangan minimum digit dalam bahagian pecahan yang melebihi bilangan yang ditetapkan dalam nombor. Dalam kes kami, mari output enam digit:

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

Hasil daripada pelaksanaan kod, kita akan melihat bahawa paip DecimalPipe menambah sifar kepada bahagian pecahan:

<div>018.678990</div>