Pipe就像个小型简易的函式,
让资料从这项事情做完之後、拿处理过的资料再去做什麽事情
用法是在要传资料的系结上,後面加上一杠 |
接着要再做的元件的名称。
将原本的TS资料经过pipe处理後,转换成另一份资料。
常用在文字格式的转换,用在相同一份资料却有不同呈现方式上。
想处理大小写转换的问题吗?这简单
| uppercase
| lowercase
HTML
<div class="container">
<p>{{title | uppercase}}</p>
</div>
TS
export class AppComponent {
title = 'Lorem ipsum dolor sit amet.';
}
| 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'
HTML
{{pi | number:'4.1-5':'fr'}}
要用语系时要先import,例如使用法国的格式
import { registerLocaleData } from '@angular/common';
import localeFr from '@angular/common/locales/fr';
registerLocaleData(localeFr);
只是我也不清楚,有没办法动态载入、或一次载到全部的时区?
不这麽做的原因是怕webpack载入太多东西、让整包资料太肥?
| 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
HTML
<p>{{a | percent:'4.3-5':'fr'}}</p>
TS
export class AppComponent {
a = 0.259;
}
| 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 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可以切割字串、阵列
只是要注意**-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',
];
}
<<: 如何在Python GUI 中随时记录log并显示在UI上呢?
>>: 30天打造品牌特色电商网站 Day.30 最後一天来总结
前几天介绍的 MVVM 架构,可以参考这篇 [[Android APP] 01-架构介绍-MVVM]...
建立bot 官方文件有说有以下建立方式至於差别在哪呢? # Returns a User insta...
今天学习如何在网页上显示清单列表,我们需要用到ul li与ol li 首先是ul li,在body里...
编辑则是会By特定编号捞取指定资料去做编辑 所以需要先把资料回填到表单 修改Show.html 这里...
担心晚上天气可能会变糟,两人选择外带饮料。 「刚刚阵列里放的只有价钱,怎麽分辨饮料的名字?」诗忆啜饮...