angular和ionic4对过滤器pipe的使用
以下为自定义过滤器
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的使用的更多相关文章
- Angular.js之内置过滤器学习笔记
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- Angular核心概念之五---过滤器
Filter:过滤器,用于在view中呈现数据时显示为另一种格式:过滤器的本质是一个函数,接收原始数据转换为新的格式进行输出: function(oldVal){ ... return newVal ...
- angular中的自定义过滤器
<!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta http-equiv="C ...
- [Angular 2] Understanding Pure & Impure pipe
First, how to use a build in pipe: <div class="pipe-example"> <label>Uppercase ...
- angular中的orderBy过滤器使用
一 orderBy过滤器 AngularJS中orderBy进行排序,第一个参数可以有三种类型,分别为:function,string,array: 第一种:function,如果是func ...
- ionic准备之angular基础——格式化数据以及过滤器(8)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- [Angular] Increasing Performance by using Pipe
For example you make a function to get rating; getRating(score: number): string { let rating: string ...
- [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 ...
- Angular JS 学习之过滤器
1.过滤器可以使用一个管道字符(|)添加到表达式和指令中: 2.AngularJS过滤器可用于转换数据: **currency:格式化数字为货币格式: **filter:从数组项中选择一个子集: ** ...
随机推荐
- python(leetcode)498. 对角线遍历
这题难度中等,记录下思路 第一个会超时, 第二个:思想是按斜对角线行进行右下左上交替遍历, def traverse(matrix): n=len(matrix)-1 m=len(matrix[0]) ...
- css3中calc、vw、vh、vmin、vmax 属性的应用及兼容性详解
一. calc()的使用什么是calc()? calc()从字面我们可以把他理解为一个函数function.其实calc是英文单词calculate(计算)的缩写,是css3的一个新增的功能,用来指定 ...
- Python变量与内存管理
Python变量与内存管理 –与C语言中的变量做对比,更好的理解Python的变量. 变量 变量在C语言中 全局变量:其存放在内存的静态变量区中. 局部变量:代码块中存放在内存的代码区当中,当被调 ...
- Qt Designer布局预览正常,代码调用时所有控件堆在一起
一.实验环境 1.Windows10x64 2.anaconda4.6.9 + python3.7.1(anaconda集成,不需单独安装) 3.pyinstaller3.5 二.问题描述 1.Qt ...
- java在hashmap初始化时赋初值
Java中的HashMap是一种常用的数据结构,一般用来做数据字典或者Hash查找的容器. 一般我们初始化并赋初值是这样做的: HashMap<String, Object> map = ...
- oracle学习笔记(十九) 子程序——存储过程
子程序--存储过程 我们可以使用子程序来封装一下我们需要的操作,子程序又有存储过程,函数和触发器. 这里先学习存储过程~ 语法 create [or replace] procedure $proce ...
- Linux 网络相关命令 Cheat Sheet
以下漫画形式呈现的常用 Linux 网络相关命令速查表来自 twitter -
- ABAP对象-面向对象(转)
转自:https://www.jianshu.com/p/f847c8f71438 1 面向对象基础 不多赘述何为对象与类.简单回顾一下在面向对象特性. 封装 限定内部资源的可见性 多态 相同名称的方 ...
- MySQL学习——操作自定义函数
MySQL学习——操作自定义函数 摘要:本文主要学习了使用DDL语句操作自定义函数的方法. 了解自定义函数 是什么 自定义函数是一种与存储过程十分相似的过程式数据库对象.它与存储过程一样,都是由SQL ...
- 用vue和layui简单写一个响应式数据展示表
在创建项目之前,先把我们需要的文件打包处理 <!DOCTYPE html> <html lang="en"> <head> <meta c ...