Angular2中Pipe的用法
2020-03-26 08:17
1046 查看
Pipe的作用
- 都是用来对输入的数据进行处理,如大小写转换、数值和日期格式化等。
Angular2的内建管道和分类
-
String -> String
UpperCasePipe
LowerCasePipe
TitleCasePipe
-
Number -> String
DecimalPipe
PercentPipe
CurrencyPipe
-
Object -> String
JsonPipe
DatePipe
-
Tools
SlicePipe
AsyncPipe
I18nPluralPipe
I18nSelectPipe
Angular2内建常用管道使用
大写转换
<div> <p ngNonBindable>{{ 'Angular' | uppercase }}</p> <p>{{ 'Angular' | uppercase }}</p> <!-- Output: ANGULAR --> </div>
- 小写转换
<div> <p ngNonBindable>{{ 'Angular' | lowercase }}</p> <p>{{ 'Angular' | lowercase }}</p> <!-- Output: angular --> </div>
- 数值格式化
<div> <p ngNonBindable>{{ 3.14159265 | number: '1.4-4' }}</p> <p>{{ 3.14159265 | number: '1.4-4' }}</p> <!-- Output: 3.1416 --> </div>
- 日期格式化
<div> <p ngNonBindable>{{ today | date: 'shortTime' }}</p> <p>{{ today | date: 'shortTime' }}</p> <!-- Output: 以当前时间为准,输出格式:10:40 AM --> </div>
Javascript对象序列化
<div> <p ngNonBindable>{{ { name: 'semlinker' } | json }}</p> <p>{{ { name: 'semlinker' } | json }}</p> <!-- Output: { "name": "semlinker" } --> </div>
管道参数
- 管道可以接收任意数量的参数,使用方式是在管道名称后面添加 : 和参数值。如 number: ‘1.4-4’ ,若需要传递多个参数则参数之间用冒号隔开,具体示例如下:
<div> <p ngNonBindable>{{ 'semlinker' | slice:0:3 }}</p> <p>{{ 'semlinker' | slice:0:3 }}</p> <!-- Output: sem --> </div>
管道链
- 可以将多个管道连接在一起,组成管道链对数据的处理
<div> <p ngNonBindable>{{ 'semlinker' | slice:0:3 | uppercase }}</p> <p>{{ 'semlinker' | slice:0:3 | uppercase }}</p> <!-- Output: SEM --> </div>
自定义管道
自定义管道步骤
- 使用 @Pipe 装饰器定义 Pipe 的 metadata 信息,如 Pipe 的名称 - 即 name 属性
- 实现 PipeTransform 接口中定义的 transform 方法
import { Pipe, PipeTransform } from "@angular/core"; @Pipe({name:'dic2string'}) export class DicToStringPipe implements PipeTransform { transform(value: any) { var ret = "man:"+value[0]+"%;" +"female:"+value[1]+"%;"+"other:" +value[2]+"%"; return ret; } }
<tr *ngFor="let item of nzTable.data;"> <td class="overflow-td">{{ item.nameOfDistributionType }}</td> <td class="overflow-td">{{ item.numberOfPatients }}</td> <td class="overflow-td">{{ item.proportion }}%</td> <td class="overflow-td">{{ item.ratioOfGender| dic2string }}</td> <td class="overflow-td"></td> <td class="overflow-td"></td> </tr>
- 在app.module.ts中声明
@NgModule({ declarations: [ AppComponent, HomeComponent, DicToStringPipe ], imports: [ ], providers: [ { provide: NZ_I18N, useValue: en_US } ], entryComponents: [ ], exports: [ ] })
- 点赞
- 收藏
- 分享
- 文章举报
相关文章推荐
- C#执行SQL事务用法实例
- JS数组方法concat()用法实例分析
- pthread_join/pthread_exit用法实例
- PendingIntent 的用法
- PerferenceActivity用法
- e = e || window.event用法细节讨论
- NSLayoutConstraint-代码实现自动布局的函数用法说明
- oracle中bulk collect into用法
- oracle merge into 用法详解
- Flex中的文本编辑器组件用法
- WinForm DataGrid 的DataGridTableStyle用法 (轉)
- MultiByteToWideChar和WideCharToMultiByte用法
- 关于typedef的用法总结
- vim的ex模式用法
- Java indexOf()的两个用法
- android 手机震动Vibrator类用法demo
- C语言函数sscanf()的用法
- __slots__用法以及优化
- php中的分页类Page的用法
- PHP中header的用法