Angular核心概念：过滤器

用户9857551

发布于 2022-06-28 01:00:39

1.5K0

Angular核心概念：过滤器

📒博客首页：蔚说的博客
🎉欢迎关注🔎点赞👍收藏⭐️留言📝
🙏作者水平很有限，如果发现错误，求告知，多谢！
🌺有问题可私信交流！！！
（达内教育学习笔记）仅供学习交流
AAngular核心概念：过滤器 Angular核心概念：过滤器自定义管道的步骤：创建管道对象的简便工具：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>