以下为自定义过滤器

import { Pipe, PipeTransform, Injectable } from '@angular/core';
import { DomSanitizer} from '@angular/platform-browser'; @Pipe({
name: 'weekPipe'
})
//数字转中文
export class WeekPipe implements PipeTransform {
transform(value: any, args?: any): any {
switch (parseInt(value)) {
case 1: return '一';
case 2: return '二';
case 3: return '三';
case 4: return '四';
case 5: return '五';
case 6: return '六';
case 7: return '日';
default:
break;
} } } @Pipe({ name: 'safe' })
export class SafePipe implements PipeTransform {
constructor(private sanitizer: DomSanitizer) {}
transform(url) {
return this.sanitizer.bypassSecurityTrustResourceUrl(url);
}
} //数字转中文
@Pipe({
name: 'type'
})
export class TypePipe implements PipeTransform {
transform(value: any, args?: any): any {
switch (value) {
case 'P': return '家长';
case 'T': return '老师';
case 'S': return '学生';
case 'P,T': return '家长,老师';
case 'P,S': return '家长,学生';
case 'T,S': return '老师,学生';
case 'T,P': return '老师,家长';
case 'S,T': return '学生,老师';
case 'S,P': return '学生,家长';
case 'P,T,S': return '不限';
case 'P,S,T': return '不限';
case 'T,P,S': return '不限';
case 'T,S,P': return '不限';
case 'S,T,P': return '不限';
case 'S,P,T': return '不限';
case 'SELF': return '本校';
case 'SCHOOL': return '本校';
case 'AREA': return '本区';
case 'CITY': return '本市';
case 'PROVINCE': return '本省';
case 'ALL': return '不限';
default:
break;
} } }

  

在angular中使用

在项目文件app.module.ts中引入

import { WeekPipe,SafePipe,TypePipe } from './common/comm-pipe.pipe';

引入以后即可全局使用,如下

在ionic中使用

在需要使用的组件中module.ts中引入,如下图

如果是子组件中使用,需在父组件中引入子组件才可使用

angular和ionic4对过滤器pipe的使用的更多相关文章

  1. Angular.js之内置过滤器学习笔记

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  2. Angular核心概念之五---过滤器

    Filter:过滤器,用于在view中呈现数据时显示为另一种格式:过滤器的本质是一个函数,接收原始数据转换为新的格式进行输出: function(oldVal){ ... return newVal ...

  3. angular中的自定义过滤器

    <!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta http-equiv="C ...

  4. [Angular 2] Understanding Pure & Impure pipe

    First, how to use a build in pipe: <div class="pipe-example"> <label>Uppercase ...

  5. angular中的orderBy过滤器使用

    一  orderBy过滤器   AngularJS中orderBy进行排序,第一个参数可以有三种类型,分别为:function,string,array:   第一种:function,如果是func ...

  6. ionic准备之angular基础——格式化数据以及过滤器(8)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. [Angular] Increasing Performance by using Pipe

    For example you make a function to get rating; getRating(score: number): string { let rating: string ...

  8. [Angular] Bind async requests in your Angular template with the async pipe and the "as" keyword

    Angular allows us to conveniently use the async pipe to automatically register to RxJS observables a ...

  9. Angular JS 学习之过滤器

    1.过滤器可以使用一个管道字符(|)添加到表达式和指令中: 2.AngularJS过滤器可用于转换数据: **currency:格式化数字为货币格式: **filter:从数组项中选择一个子集: ** ...

随机推荐

  1. php中trait的使用方法

    1.php中的trait是啥? 看上去既像类又像接口,其实都不是,Trait可以看做类的部分实现,可以混入一个或多个现有的PHP类中,其作用有两个:表明类可以做什么:提供模块化实现.Trait是一种代 ...

  2. ubuntu 16.04无法连接网络;双系统无法上网;连接已断开,你现在处于断开状态

    先描述一一下我的问题,若和你的一样,请继续往下看. 我是在原有Windows7系统的台式计算机中安装了ubuntu 16.04,所以目前这台计算机是双系统.打开Windows系统时有线网络正常链接.但 ...

  3. jQuery 源码分析(十一) 队列模块 Queue详解

    队列是常用的数据结构之一,只允许在表的前端(队头)进行删除操作(出队),在表的后端(队尾)进行插入操作(入队).特点是先进先出,最先插入的元素最先被删除. 在jQuery内部,队列模块为动画模块提供基 ...

  4. javascript刷新当前页面的几种方式

    这里总结一下JavaScript刷新当前页面的几种方式. 1.history对象. history.go(0); 2.location对象. location.reload(); location = ...

  5. mosquitto配置文件

    #配置文件为mosquitto #参见mosquitto.conf(5)了解更多信息. #显示默认值,取消注释以更改. #使用#字符来表示注释,但只有当它是 #第一个字符就行了. #========= ...

  6. PDF目录编辑器使用介绍

    PDF目录编辑器使用介绍 魏刘宏 2019.06.28 PDF 是一个比较优秀的文档格式,能够保证在任何终端显示的样式是一样的.但同时也带来了一个问题,就是编辑不方便,其实这也是这个格式特意为之的,无 ...

  7. VS Code 快捷键 && 常用插件

    常用插件    分类 插件名称 说明 开发 C# C#语言 C# Extensions C#扩展功能(添加类,接口,智能提示) C# XML Documentation Comments 代码添加注释 ...

  8. Python安装PyOpenGL

    1.目前PyOpenGL是用python2写的,如果你使用的是python3需要自己修改PyOpenGL,我这里使用的是python2.7 2.下载PyOpenGLhttps://pypi.org/p ...

  9. Vue中计算属性、侦听、过滤、自定义指令、ref的操作

    1.计算属性 <div id="app"> <input type="text" v-model="x"> < ...

  10. call , apply的this指向实现原理并自己实现封装

    实现this指向原理 var value = 'value' var obj = { value: 'obj' } function func() { console.log(this.value) ...