Angular核心概念:过滤器
📒博客首页:蔚说的博客 |
---|
🎉欢迎关注🔎点赞👍收藏⭐️留言📝 |
🙏作者水平很有限,如果发现错误,求告知,多谢! |
🌺有问题可私信交流!!! |
(达内教育学习笔记)仅供学习交流 |
AAngular核心概念:过滤器 |
Filter:过滤器,用于View中呈现数据时显示为另一种格式,过滤器的本质是一个函数接收原始数据转换为新的格式进行输出:function(oldVal){处理…return newVal}
使用过滤器:{{e.salary | 过滤器名}}
Angular2.x中,过滤器更名为“管道(Pipe)”
自定义管道的步骤:
1. 创建管道Class,实现转换功能
创建一个文件sex.pipe.ts
import { Pipe } from "@angular/core";
@Pipe({
name:'sex'//管道名
})
export class SexPipe{
//管道中执行过滤任务的是一个固定的函数
transform(val: number){//转换
if(val==1){
return '男'
}else if(val==0){
return '女'
}else{
return '未知'
}
}
}
2. 在模块中注册管道
在app.module.ts文件中声明
import { SexPipe } from './sex.pipe';
declarations: [
AppComponent,
SexPipe,//导入管道
],
3. 在模板中使用管道
<td>{{e.sex | sex}}</td>
//sex是管道名
调用管道的时候可以使用:传递参数,如下
<td>{{e.sex | sex:'en'}}</td>
创建管道对象的简便工具:
ng g pipe 管道名
效果图展示
Angular提供了几个预定义管道:
Vue.js没有预定义管道;Angular提供了几个预定义管道:
详情请查看Angular官方文档:
Angular管道详情!点这
接下来介绍几个常用的:
- SlicePipe
从一个 Array 或 String 中创建其元素一个新子集(slice)。
{{ value_expression | slice : start [ : end ] }}
<li *ngFor="let i of collection | slice:1:3">{{i}}
- JsonPipe
把一个值转换成 JSON 字符串格式。在调试时很有用。
{{ value_expression | json }}
- LowerCasePipe
把文本转换成全小写形式。
{{ value_expression | lowercase }}
- DatePipe
根据区域设置规则格式化日期值。
{{ value_expression | date [ : format [ : timezone [ : locale ] ] ] }}
- KeyValuePipe
将 Object 或 Map 转换为键值对数组。
{{ input_expression | keyvalue [ : compareFn ] }}
- DecimalPipe
把数字转换成字符串,根据本地化规则进行格式化,这些规则会决定分组大小和分组分隔符,小数点字符以及其他本地化环境有关的配置项。
{{ value_expression | number [ : digitsInfo [ : locale ] ] }}
<td>{{e.salary | number:'4.1-4'}}</td>
4.1-4前边4位小数点后一到四位
//digitsInfo小数信息
右侧是添加条件的效果
- CurrencyPipe
{{ value_expression | currency [ : currencyCode [ : display [ : digitsInfo [ : locale ] ] ] ] }}
<td>{{e.salary | currency}}</td>
默认的话就是$
<td>{{e.salary | currency:'¥'}}</td>
指定¥符号
- DatePipe
根据区域设置规则格式化日期值。
{{ value_expression | date [ : format [ : timezone [ : locale ] ] ] }}
<td>{{e.brithday}}</td>
<td>{{e.brithday | date}}</td>
<td>{{e.brithday | date:'yyyy-MM-dd HH:mm:ss'}}</td>