การจัดรูปแบบตัวเลขด้วย Pipe ใน Angular
ด้วย DecimalPipe
เราสามารถจัดรูปแบบตัวเลขได้ ในพารามิเตอร์แรก
ของ pipe เราส่งผ่านจำนวนหลักขั้นต่ำ
ในส่วนจำนวนเต็ม ในพารามิเตอร์ที่สอง
ระบุจำนวนหลักขั้นต่ำใน
ส่วนทศนิยม ในพารามิเตอร์ทางเลือกที่สาม
กำหนดจำนวนหลักสูงสุดในส่วนทศนิยม
แม้ว่า pipe ของเราจะชื่อว่า
DecimalPipe แต่สำหรับการเรียกใช้เราเขียน
ดังนี้: number
มาลองใช้ในทางปฏิบัติกัน ในคลาส คอมโพเนนต์ กำหนดตัวเลขต่อไปนี้:
export class AppComponent {
num: number = 18;
}
ตัวอย่าง
ลองแสดงตัวเลขของเรา เพื่อให้ใน
ส่วนจำนวนเต็มมีสองหลัก โดยที่
จำนวนหลักขั้นต่ำในส่วนทศนิยม
จะเป็น 1:
<div>{{ num | number:'2.1' }}</div>
ผลลัพธ์ของการรันโค้ด:
<div>18.0</div>
ตัวอย่าง
ตอนนี้ลองกำหนดให้ในส่วนทศนิยม ของตัวเลขของเราแสดงสองหลัก:
<div>{{ num | number:'2.2' }}</div>
ผลลัพธ์ของการรันโค้ด:
<div>18.00</div>
ตัวอย่าง
ลองกำหนดตัวเลขใหม่:
export class AppComponent {
num: number = 18.67899;
}
และแสดงในเทมเพลต HTML โดยให้ใน ส่วนทศนิยมแสดงสูงสุดสองหลัก:
<div>{{ num | number:'2.1-2' }}</div>
ผลลัพธ์ของการรันโค้ด:
<div>18.68</div>
ตัวอย่าง
ตอนนี้จัดรูปแบบตัวเลขของเราใหม่ เพื่อให้ในส่วนจำนวนเต็มมีสามหลัก และ ในส่วนทศนิยมแสดงห้าหลัก:
<div>{{ num | number:'3.5-6' }}</div>
ผลลัพธ์ของการรันโค้ด:
<div>018.67899</div>
ตัวอย่าง
ลองแสดงจำนวนหลักขั้นต่ำ ในส่วนทศนิยม ซึ่งมากกว่า จำนวนที่กำหนดในตัวเลข ในกรณีของเรา แสดงหกหลัก:
<div>{{ num | number:'3.6-8' }}</div>
ผลลัพธ์ของการรันโค้ดเราจะเห็นว่า
DecimalPipe เพิ่มศูนย์
ในส่วนทศนิยม:
<div>018.678990</div>
โจทย์ฝึกปฏิบัติ
กำหนดตัวเลข:
num: number = 15;
จัดรูปแบบในลักษณะต่อไปนี้:
'015.000'
กำหนดตัวเลข:
num: number = 12.345;
จัดรูปแบบในลักษณะต่อไปนี้:
'0012.345'
กำหนดตัวเลข:
num: number = 12.345;
จัดรูปแบบในลักษณะต่อไปนี้:
'12.3'
กำหนดตัวเลข:
num: number = 12.345;
จัดรูปแบบในลักษณะต่อไปนี้:
'012.34500'
กำหนดตัวเลข:
num: number = -7.261;
จัดรูปแบบในลักษณะต่อไปนี้:
'-007.3'
กำหนดตัวเลข:
num: number = 100.261923;
จัดรูปแบบในลักษณะต่อไปนี้:
'100.9226130'
กำหนดตัวเลข:
num: number = 100.926613;
จัดรูปแบบในลักษณะต่อไปนี้:
'0100.93'
