YuShu Hsiao

 

透過官網，可以知道Angular 內建 多種Pipe:

簡單介紹其中幾樣

UpperCasePipe LowerCasePipe : 透過Pipe component 將字串轉換為大小寫

用法很簡單:

component.ts內定義文字

pipe_title = 'This is demo Visual Studio Code !';

template:component.html

<div>
    <div>{{pipe_title|uppercase}}</div>

    <div>{{pipe_title|lowercase}}</div>
</div>

其中在template內寫Pipe可善用intellisense

DecimalPipe

詳細介紹可見 官網

這邊節錄一些重點

{{ value_expression | number [ : digitsInfo [ : locale ] ] }}

value_expression:要轉換的運算結果

number:pipe 名稱(雖然是DecimalPipe ，但是實際使用要用number)

digitsInfo :包在中括號內，表示非必輸(Optional)，要轉換的規則

{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}

minIntegerDigits:最少的整數位數顯示幾位數

minFractionDigits:最少小數位數顯示幾位數

maxFractionDigits:最多小數位數顯示幾位數

locale:可輸入locale_ID 來依照當地的規則轉換數字

官網內有很詳細的範例可供參考

 

JsonPipe

非常方便偵錯後端提供的Json物件，

例如:

先在component.ts內準備一段JSON的資料

data = [
    {
      title: 'Google',
      'href-link': 'http://www.google.com.tw',
      date: '2018/05/10',
      content: '<p>Google Content</p>'
    },
    {
      title: 'Facebook',
      'href-link': 'http://www.facebook.com.tw',
      date: '2018/05/11',
      content: '<p>Facebook Content</p>'
    },
    {
      title: 'Yahoo',
      'href-link': 'http://www.yahoo.com.tw',
      date: '2018/05/12',
      content: '<p>Yahoo Content</p>'
    }
  ];

然後在template裡面利用Structure Directive:ngFor 將資料呈現在畫面上

<div>
    <div id="id_{{_idx}}" *ngFor="let item of data;let _idx = index">
        <a [href]="item['href-link']">{{item.title}}</a>
        <br>
        <span>Date:{{item.date}}</span>
        <span [innerHTML]="item.content"></span>
        <pre>
          {{item}}
        </pre>
    </div>
</div>

如果我想偵錯，想看一下後端丟什麼資料到前端，我用 <pre>{{item}}</pre> 把資料呈現在畫面上

結果只會看到object

這時候就可以使用JsonPipe

將<pre>{{item}}</pre> 改為 <pre>{{item|json}}</pre>

就可以看到正確的資料

 

slicePipe : 可以切割字串或者是陣列、物件陣列

{{ value_expression | slice : start [ : end ] }}

value_expression  => 要切割的字串 或者是 陣列

start :必輸，要切割的起始字元(OR陣列的INDEX) ，如果輸入負數就是從後面開始算起

end :非必輸，如果沒有輸入的話就會直接切到最後一個字元OR陣列的最後一個element