Angular核心概念：过滤器

Angular核心概念：过滤器

博客首页：蔚说的博客
欢迎关注点赞收藏⭐️留言
作者水平很有限，如果发现错误，求告知，多谢！
有问题可私信交流！！！
（达内教育学习笔记）仅供学习交流

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>