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:从数组项中选择一个子集: ** ...
随机推荐
- acwing 835. Trie字符串统计
地址 https://www.acwing.com/problem/content/description/837/ 维护一个字符串集合,支持两种操作: “I x”向集合中插入一个字符串x: “Q ...
- c++用控制符控制输出格式
#include<iostream> #include<cstdio> #include<iomanip> using namespace std; int mai ...
- Python骚操作:Python控制Excel实现自动化办公!
1.安装 2.操作一个简单的Excel文档 操作注释及代码: 操作完成后,数据存储结果如下: 3. 操作简单Excel文档并添加数据格式 操作代码如下:附带数据格式的定义 操作效果 ...
- IT兄弟连 HTML5教程 了解HTML5的主流应用3
5 基于HTML5的移动APP开发 不同的操作系统中,需要安装用不同技术开发的APP,移动端的操作系统有很多种,但最主要有两大分支,一种在苹果iOS操作系统中使用Objective-C语言开发APP ...
- Ansible 日常使用技巧 - 运维总结
Ansible默认只会创建5个进程并发执行任务,所以一次任务只能同时控制5台机器执行.如果有大量的机器需要控制,例如20台,Ansible执行一个任务时会先在其中5台上执行,执行成功后再执行下一批5台 ...
- 使用configparser模块进行封装,构造配置文件处理器
from configparser import ConfigParser class HandleConfig: ''' 定义一个配置文件处理类 ''' def __init__(self, fil ...
- 关于powermock报错org.powermock.reflect.exceptions.FieldNotFoundException: Field 'fTestClass' was not found in class org.junit.internal.runners.MethodValidator.问题解决
事件背景 使用PowerMock模拟一个局部变量,添加@RunWith(PowerMockRunner.class).@PrepareForTest(StudentService.class)注解成功 ...
- Long类型数据前端精度丢失
问题描述 后端把Long类型的数据传给前端,前端可能会出现精度丢失的情况.例如:201511200001725439这样一个Long类型的整数,传给前端后会变成201511200001725440 相 ...
- CodeForces 200D Programming Language
Recently, Valery have come across an entirely new programming language. Most of all the language att ...
- 【LOJ#2687】Vim(动态规划)
[LOJ#2687]Vim(动态规划) 题面 LOJ 题解 发现移动的路径一定是每次往后跳到下一个某个字符的位置,然后往回走若干步,删掉路径上的所有\(e\),然后继续执行这个操作. 这里稍微介绍一下 ...