Định dạng số bằng Pipe trong Angular

Với pipe DecimalPipe có thể định dạng số. Trong tham số đầu tiên của pipe, chúng ta truyền số chữ số tối thiểu trong phần nguyên. Trong tham số thứ hai, chỉ định số chữ số tối thiểu trong phần thập phân. Trong tham số thứ ba không bắt buộc, thiết lập số chữ số tối đa trong phần thập phân.

Mặc dù pipe của chúng ta được gọi là DecimalPipe, nhưng để gọi nó, chúng ta viết như sau: number.

Hãy thử thực hành. Trong lớp component, hãy đặt số sau:

export class AppComponent {
	num: number = 18;
}

Ví dụ

Hãy hiển thị số của chúng ta sao cho trong phần nguyên của nó có hai chữ số. Đồng thời, số chữ số tối thiểu trong phần thập phân sẽ là 1:

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

Kết quả thực thi mã:

<div>18.0</div>

Ví dụ

Bây giờ hãy thiết lập để trong phần thập phân của số chúng ta hiển thị hai chữ số:

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

Kết quả thực thi mã:

<div>18.00</div>

Ví dụ

Hãy đặt một số mới:

export class AppComponent {
	num: number = 18.67899;
}

Và hiển thị nó trong template HTML sao cho trong phần thập phân hiển thị tối đa hai chữ số:

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

Kết quả thực thi mã:

<div>18.68</div>

Ví dụ

Bây giờ hãy định dạng số của chúng ta sao cho trong phần nguyên của nó có ba chữ số. Còn trong phần thập phân hiển thị năm chữ số:

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

Kết quả thực thi mã:

<div>018.67899</div>

Ví dụ

Hãy thử hiển thị số chữ số tối thiểu trong phần thập phân, vượt quá số lượng đã cho trong số. Trong trường hợp của chúng ta, hãy hiển thị sáu chữ số:

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

Kết quả thực thi mã, chúng ta sẽ thấy rằng pipe DecimalPipe đã thêm số không vào phần thập phân:

<div>018.678990</div>