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

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

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

ตัวอย่าง

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

app/app.component.tsexport class AppComponent {
  salary: number = 867.564;
}

ตัวอย่าง

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

app/app.component.html<div>{{ salary | currency }}</div>

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

html<div>$867.56</div>

ตัวอย่าง

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

app/app.component.html<div>{{ salary | currency:'RUB':'code' }}</div>

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

html<div>RUB867.56</div>

ตัวอย่าง

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

app/app.component.html<div>{{ salary | currency:'RUB':'symbol-narrow' }}</div>

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

html<div>₽867.56</div>

ตัวอย่าง

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

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

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

html<div>RUB867.5640</div>

ตัวอย่าง

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

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

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

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

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

typescriptsalary: number = 134.89;

typescript'$134.89'

typescriptsalary: number = 134.89;

typescript'€134.89'

typescriptsalary: number = 134.89;

typescript'$134.890'

typescriptsalary: number = 134.89;

typescript'$0,134.8900'

typescriptsalary: number = 134.89;

typescript'this currency is changed 134.89'