管線元件 Pipe

Pipe就像個小型簡易的函式，
讓資料從這項事情做完之後、拿處理過的資料再去做什麼事情
用法是在要傳資料的繫結上，後面加上一槓 | 接著要再做的元件的名稱。

將原本的TS資料經過pipe處理後，轉換成另一份資料。
常用在文字格式的轉換，用在相同一份資料卻有不同呈現方式上。

大小寫 Uppercase、Lowercase

想處理大小寫轉換的問題嗎？這簡單

| uppercase
| lowercase

HTML

<div class="container">
    <p>{{title | uppercase}}</p>
</div>

TS

export class AppComponent {
    title = 'Lorem ipsum dolor sit amet.';
}

數字、十進制轉換 Decimal(number)

| number

HTML

<div class="container">
    <p>{{pi | number}}</p>
    <p>{{pi | number:'5.1-5'}}</p>
    <p>{{pi | number: '0.3-3'}}</p>
</div>

TS

export class AppComponent {
    pi = 3.14159265359;
}

支援全球化語系的小數點格式與貨幣

number: 'a.b-c': 'locale'

• a: 最少有幾位數
• b: 最少幾個小數點
• c: 最多幾個小數點

HTML

{{pi | number:'4.1-5':'fr'}}

要用語系時要先import，例如使用法國的格式

import { registerLocaleData } from '@angular/common';
import localeFr from '@angular/common/locales/fr';
registerLocaleData(localeFr);

只是我也不清楚，有沒辦法動態載入、或一次載到全部的時區？
不這麼做的原因是怕webpack載入太多東西、讓整包資料太肥？

貨幣 Currency

| currency

HTML

<div class="container">
    <p>{{a|currency: 'TWD':'symbol':'':''}}</p>
    <p>{{a|currency: 'TWD':'symbol-narrow':'':''}}</p>
    <p>{{a|currency: 'TWD':'code':'4.2-2':'fr'}}</p>
</div>

TS

export class AppComponent {
    a = 0.259;
}

百分比 Percent

| percent

HTML

<p>{{a | percent:'4.3-5':'fr'}}</p>

TS

export class AppComponent {
    a = 0.259;
}

日期 Date

| date

HTML

<div class="container">
    <p>{{t1}}</p>
    <p>{{t1 | date}}</p>
    <p>{{t1 | date: 'medium'}}</p>
    <p>{{t1 | date:'yyyy-MM-dd':'zh-TW'}}</p>
</div>

TS

export class AppComponent {
    t1 = '2021/10/06 18:00';
}

Json 格式

| json

可以透過Json Pipe直接看物件是否符合Json格式，
在除錯上非常快速方便。

HTML

<div class="container d-flex">
    <div *ngFor="let item of data">
        <pre>{{item}}</pre>
    </div>

    <div *ngFor="let item of data">
        <pre>{{item | json}}</pre>
    </div>
</div>

TS

export class AppComponent {
    data = [
        {SID: 'S001', name: '王大明', score: 80, 'image-url': 'https://picsum.photos/id/10/200/300', 'self-intro': '<div>大家好，我是王大明。</div>'},
        {SID: 'S002', name: '林一二', score: 99, 'image-url': 'https://picsum.photos/id/20/200/300', 'self-intro': '<div>大家好，我是林一二<br>請各位多多指教。</div>'},
        {SID: 'S003', name: '黃阿道', score: 54, 'image-url': 'https://picsum.photos/id/30/200/300', 'self-intro': '<div>大家好，我是黃阿道<br>我成績不太好<br>請大家多包涵。</div>'},
    ];
}

切片 Slice

| slice

Slice可以切割字串、陣列
只是要注意**-1是倒數第二個字**

HTML

<div class="container">
    <p>{{string | slice:0:10}}</p>
    <p>{{string | slice:-10:-1}}</p>
    <p>{{string | slice:-10}}</p>

    <p>{{list | slice:0:3}}</p>
</div>

TS

export class AppComponent {
    string = '今天天氣真好，太陽好大風一直吹。';
    list = [
        '1',
        '22',
        '333',
        '4444',
        '55555',
        '666666',
    ];
}

所有預設的pipes