การจัดรูปแบบสกุลเงินโดยใช้ Pipe ใน Angular

สามารถใช้ Pipe CurrencyPipe ในการจัดรูปแบบการแสดงผลสกุลเงินได้ ในพารามิเตอร์แรกของ Pipe จะส่งรหัสสกุลเงินตามข้อกำหนด ISO 4217 (ค่าเริ่มต้นคือ USD) ในพารามิเตอร์ที่สองเรากำหนดการแสดงผลสกุลเงิน ซึ่งสามารถรับค่าต่อไปนี้: 'code' (รหัสสกุลเงิน), 'symbol' (สัญลักษณ์ของมัน), 'symbol-narrow' (สำหรับประเทศที่มีสัญลักษณ์สกุลเงินหลายแบบ), 'string' (สำหรับแสดงผลสตริงใดๆ) ในพารามิเตอร์ที่สามซึ่งเป็นตัวเลือก เราสามารถกำหนดรูปแบบตัวเลขได้ โดยเหมือนกับ Pipe DecimalPipe ในพารามิเตอร์ที่สี่ซึ่งเป็นตัวเลือก สามารถระบุรหัส locale ที่ใช้ได้:

<div>{{ value | number : รหัสสกุลเงิน : การแสดงผลสกุลเงิน : รูปแบบตัวเลข : รหัส locale }}</div>

ตัวอย่าง

มาลองใช้งาน Pipe ด้วยตัวอย่างกัน สำหรับสิ่งนี้ ในคลาสคอมโพเนนต์ เรากำหนดคุณสมบัติ salary ต่อไปนี้ ซึ่งเก็บเงินเดือนในสกุลเงินบางสกุล:

export class AppComponent {
	salary: number = 867.564;
}

ตัวอย่าง

มาแปลงตัวเลขของเราเป็นสกุลเงินกัน:

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

ผลลัพธ์การทำงานของโค้ด:

<div>$867.56</div>

ตัวอย่าง

ตอนนี้เรามาระบุการแสดงผลสกุลเงินเป็นรูปรัสเซีย:

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

ผลลัพธ์การทำงานของโค้ด:

<div>RUB867.56</div>

ตัวอย่าง

มาแสดงสัญลักษณ์รูปรัสเซียถัดจากตัวเลขกัน:

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

ผลลัพธ์การทำงานของโค้ด:

<div>₽867.56</div>

ตัวอย่าง

ตอนนี้เรามาทำให้ตัวเลขมีทศนิยมสี่ตำแหน่ง:

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

ผลลัพธ์การทำงานของโค้ด:

<div>RUB867.5640</div>

ตัวอย่าง

มาเพิ่มสตริงต่อไปนี้ในการแสดงผลสกุลเงิน:

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

ผลลัพธ์การทำงานของโค้ด:

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

โจทย์ฝึกปฏิบัติ

กำหนดตัวเลข:

salary: number = 134.89;

จัดรูปแบบในรูปแบบต่อไปนี้:

'$134.89'

กำหนดตัวเลข:

salary: number = 134.89;

จัดรูปแบบในรูปแบบต่อไปนี้:

'€134.89'

กำหนดตัวเลข:

salary: number = 134.89;

จัดรูปแบบในรูปแบบต่อไปนี้:

'$134.890'

กำหนดตัวเลข:

salary: number = 134.89;

จัดรูปแบบในรูปแบบต่อไปนี้:

'$0,134.8900'

กำหนดตัวเลข:

salary: number = 134.89;

จัดรูปแบบในรูปแบบต่อไปนี้:

'this currency is changed 134.89'