![angular](https://i.imgur.com/87pBpoJ.jpg)
在工作上有一個需要轉千分位的需求,做個紀錄,專案使用 Angular 開發。
需求
規格書文件中提到以下需求:
- 有一筆資料有字串有數字,如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
| data = [ { name: "iphone", price: 35000, }, { name: "phone case", price: 880, }, { name: "battery", price: 990, }, { name: "Macbook pro", price: 41500, }, ];
|
- 當超過 1000 的價格要使用千分位顯示,若不到 1000 就顯示原本的數字。
解決方式
因後端有多筆資料,故可以使用 Pipe 做一個共用管道,當數值丟進來時,可以去做轉換顯示。
先把資料渲染出來確認無誤
這邊使用 table 當作資料呈現方式,樣式則使用 TailwindCSS 來製作。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33
| <div class="p-3"> <h1 class="py-2 text-purple-500 tracking-wide"> 使用 Pipe 成為共用管道轉成「千分位數」 </h1> <p>當超過 1000 就加上逗號區隔,若沒有就顯示原本的數值</p>
<table class=" border-2 border-purple-700 w-full"> <thead class=" bg-purple-700 text-white"> <tr> <th class="py-2 px-4 text-center">品項</th> <th class="py-2 px-4 text-center">價格</th> <th class="py-2 px-4 text-center">品項</th> <th class="py-2 px-4 text-center">價格</th> <th class="py-2 px-4 text-center">品項</th> <th class="py-2 px-4 text-center">價格</th> <th class="py-2 px-4 text-center">品項</th> <th class="py-2 px-4 text-center">價格</th> </tr> </thead> <tbody> <tr> <ng-container *ngFor="let item of data"> <td class="py-2 px-4 text-center border-purple-700 border-2 "> {{item.name}} </td> <td class="px-4 py-2 text-center border-purple-700 border-2"> {{item.price}} </td> </ng-container> </tr> </tbody> </table> </div>
|
利用 ng-container 標籤中使用 ngFor 把資料渲染在 td 上,這樣比較不會破壞網頁架構。
建立 pipe 管道
新增一個 pipe 檔案,這邊我使用 toThousand.pipe.ts
,並在裡面寫上要處理的功能。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
| import { Pipe, PipeTransform } from "@angular/core";
@Pipe({ name: "toThousandPipe", }) export class toThousandPipe implements PipeTransform { transform(value: number) { return this.toThousandNumber(value); }
toThousandNumber(param: number) { const paramStr = param.toString(); if (paramStr.length > 3) { return paramStr.replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ","); } return paramStr; } }
|
說明:
- 先輸入 @Pipe,便會自動引入元件,並在此方法裡面建立一個物件為
{name:'customPipeName}'
,那這邊我自定義為 toThousandPipe
。
- 要把這個 pipe 匯出(export)使用,並且用
PipeTransform
實作介面。
- 要先建立一個
transform(value)
的方法,裡面的參數在建立時會自己帶出,裡面要把等等要實作的方法 return 出來給 transform
這個函式使用,才會把值輸出。
- 建立我要轉千分位的函式。
- 因為資料傳進來的是 number,所以我要先做一次轉型,為的是要判斷字串長度。
- 並用 replace 的陣列方法,替換成正則表達式,並於每三個中間加入逗號做區隔,變成千分位數的顯示方式,只要超過 3 個字串,也就是 1000 的時候,就會自行在千位數後面加上逗號。
- 若小於 3 個字串,則顯示原本的字串。
滿簡單確實用的小功能。
放入要使用的 module.ts 中並且在模板中引入
每次寫完 pipe 都很開心想直接用,但卻忘了引入在會使用到的 module 內,範例式引入在 app.module.ts,實際上要看專案引入。
最後記得要在模板上使用喔!
pipe.component.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34
| <div class="p-3"> <h1 class="py-2 text-purple-500 tracking-wide"> 使用 Pipe 成為共用管道轉成「千分位數」 </h1> <p>當超過 1000 就加上逗號區隔,若沒有就顯示原本的數值</p>
<table class=" border-2 border-purple-700 w-full"> <thead class=" bg-purple-700 text-white"> <tr> <th class="py-2 px-4 text-center">品項</th> <th class="py-2 px-4 text-center">價格</th> <th class="py-2 px-4 text-center">品項</th> <th class="py-2 px-4 text-center">價格</th> <th class="py-2 px-4 text-center">品項</th> <th class="py-2 px-4 text-center">價格</th> <th class="py-2 px-4 text-center">品項</th> <th class="py-2 px-4 text-center">價格</th> </tr> </thead> <tbody> <tr> <ng-container *ngFor="let item of data"> <td class="py-2 px-4 text-center border-purple-700 border-2 "> {{item.name}} </td> <td class="px-4 py-2 text-center border-purple-700 border-2"> {{item.price | toThousandPipe}} </td> //這裡使用 </ng-container> </tr> </tbody> </table> </div>
|
Demo
連結:https://github.com/hsuchihting/angular_demo/blob/main/src/app/page/pipe/pipe.component.html
參考資料