【後转前要多久】# Day30 Angular - Pipe 管道元件

管线元件 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


<<:  如何在Python GUI 中随时记录log并显示在UI上呢?

>>:  30天打造品牌特色电商网站 Day.30 最後一天来总结

Day 26 - [Android APP] 04-MVVM - Repository与API串接

前几天介绍的 MVVM 架构,可以参考这篇 [[Android APP] 01-架构介绍-MVVM]...

Day11 测试写起乃-FactoryBot-create、build、build_stubbed

建立bot 官方文件有说有以下建立方式至於差别在哪呢? # Returns a User insta...

html清单

今天学习如何在网页上显示清单列表,我们需要用到ul li与ol li 首先是ul li,在body里...

.Net Core Web Api_笔记16_api结合ADO.NET资料库操作part4_资料编辑提交更新

编辑则是会By特定编号捞取指定资料去做编辑 所以需要先把资料回填到表单 修改Show.html 这里...

周末雨会(四):自定义资料类别 Defined Data Class

担心晚上天气可能会变糟,两人选择外带饮料。 「刚刚阵列里放的只有价钱,怎麽分辨饮料的名字?」诗忆啜饮...