Angular中管道操作符(|)的使用方法

管道是什么？

Angular的管道可以看作成是一个数据格式化展示的工具。管道可以将数据格式化显示，而不改变源数据。比如关于日期的展示，对于源数据使用管道1可以以yyyy/MM/dd来展示，也可以使用管道2展示成Feb 28, 2017的形式。但原数据依然是date，并没有改变。利用管道我们可以将数据格式化的内容剥离出来，使之独立，有需要格式化展示的时候选择相应的管道进行处理即可。

一、模板表达式操作符

模板表达式语言使用了JavaScript 语法的子集，并补充了几个用于特定场景的特殊操作符：管道操作符、安全导航操作符。

二、管道操作符 (|)

在绑定之前，表达式的结果可能需要一些转换。例如，可能希望吧数字显示成金额、强制文本变成大写，或者过滤列表以及进行排序。

Angular 管道对象这样的小型转换来说是个很方便的选择。

管道是一个简单的函数，它接受一个输入值，并返回转换结果。

Angular 的常用内置管道函数：

DatePipe，UpperCasePipe，LowerCasePipe，CurrencyPipi，PercentPipe，JsonPipe等。

它们用于模板表达式中，只要使用管道操作符(|) 就行了。

使用方法

管道操作符会把它左侧的表达式结果传给它右侧的管道函数。还可以通过多个管道串联表达式。

<div>
 Title through a pipe chain:
 {{title | uppercase | lowercase}}
</div>

常用实例：

<div class="alert alert-warning">
 <p>{{title|uppercase }}</p>
 <p>{{title|uppercase|lowercase }}</p>
 <p>{{this|json}}</p>
 <p>{{time|date:'yyyy-MM-dd'}}</p>
 <p>{{number|percent}}</p>
 <p>{{number|currency:'CNY'}}</p>
</div>

ts 属性：

export class AppComponent {
 title = 'app';
 name = '张三丰';
 time = new Date();
 number = 1.123;
 show(str: string) {
 str += '---测试';
 return str;
 }
}

显示结果：

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对我们的支持。

赞 (0)

相关推荐

  • Angular2管道Pipe及自定义管道格式数据用法实例分析

    本文实例讲述了Angular2管道Pipe及自定义管道格式数据用法.分享给大家供大家参考,具体如下: 管道(Pipe)可以根据开发者的意愿将数据格式化,还可以多个管道串联. 纯管道(Pure Pipe)与非纯管道(Impure Pipe) 管道分纯管道(Pure Pipe)和非纯管道(Impure Pipe).默认情况下,管道都是纯的,在自定义管道声明时把pure标志置为false,就是非纯管道.如: @Pipe({ name: 'sexReform', pure:false }) 纯管道和非纯

  • 浅谈Angular4中常用管道

    通常我们需要使用管道实现对数据的格式化,Angular4中的管道和之前有了一些变化,下面说一些常用的管道. 一.大小写转换管道 uppercase将字符串转换为大写 lowercase将字符串转换为小写 <p>将字符串转换为大写{{str | uppercase}}</p> str:string = 'hello' 页面上会显示 将字符串转换为大写HELLO 二.日期管道 date.日期管道符可以接受参数,用来规定输出日期的格式. <p>现在的时间是{{today |

  • Angular2的管道Pipe的使用方法

    管道Pipe可以将数据作为输入,然后按照规则将其转换并输出.在Angular2中有许多内置的Pipe,比如DatePipe.UpperCasePipe和CurrencyPipe等.在这里我们主要介绍如何自定义Pipe. 1. 管道定义 Pipe的定义如下代码所示: import { PipeTransform, Pipe } from '@angular/core'; /*users: Array<any> = [ { name: '1', id: 1 }, { name: '2', id:

  • Angular中管道操作符(|)的使用方法

    Angular中管道操作符(|)的使用方法

    管道是什么? Angular的管道可以看作成是一个数据格式化展示的工具.管道可以将数据格式化显示,而不改变源数据.比如关于日期的展示,对于源数据使用管道1可以以yyyy/MM/dd来展示,也可以使用管道2展示成Feb 28, 2017的形式.但原数据依然是date,并没有改变.利用管道我们可以将数据格式化的内容剥离出来,使之独立,有需要格式化展示的时候选择相应的管道进行处理即可. 一.模板表达式操作符 模板表达式语言使用了JavaScript 语法的子集,并补充了几个用于特定场景的特殊操作符:管

  • Angular中的请求拦截的方法

    Angular中的请求拦截的方法

    目录 区分环境 添加拦截器 验证 在上一篇的文章Angular 中使用 Api 代理,我们处理了本地联调接口的问题,使用了代理. 我们的接口是单独编写的处理的,在实际的开发项目中,有众多的接口,有些需要登陆凭证,有些不需要.一个一个接口处理不妥,我们是否可以考虑对请求进行拦截封装呢? 本文章来实现下. 区分环境 我们需要对不同环境下的服务进行拦截.在使用 angular-cli 生成项目的时候,它已经自动做好了环境的区分,在 app/enviroments 目录下: environments ├

  • php smarty模版引擎中变量操作符及使用方法

    smarty常用的20个变量操作符 * 使用语法:{变量名|操作符:} * capitalize ---首字母大写 * count_characters ---计算字符数 * cat ---连接字符串 * count_paragraphs ---计算段落数 * count_sentences ---计算句数 * count_words ---计算词数 * date_format ---时间格式 * default ---默认 * escape ---转码 * indent ---缩进 * low

  • Angular中使用better-scroll插件的方法

    better-scroll的使用 由于需要在一个固定的的高度做无限滚动,本来css的overflow-y也可以完成的,奈何安卓不是很流畅,还很生硬,就是用了第三方库better-scroll,配合angular的ng-content.angular的ng-content和vue的插槽很像,里面一些不确定的内容可以通过ng-content投影进去. 安装better-scroll 1: npm install better-scroll --save 2: 安装types npm install

  • Angular中$broadcast和$emit的使用方法详解

    Angular中$broadcast和$emit的使用方法详解

    要在控制器之间传递变量变化需要使用angular中的$broadcast和$emit方法来传递,同时使用$on来接收事件并作出响应. broadcast译为广播,即上级传递下级. 示例代码: <script src="../angular.js"></script> <script> angular.module("app", []) .controller("child", function($scope)

  • Angular中的$watch方法详解

    在$apply方法中提到过脏检查,首先apply方法会触发evel方法,当evel方法解析成功后,会去触发digest方法,digest方法会触发watch方法. (1)$watch简介 在digest执行时,如果watch观察的的value与上一次执行时不一样时,就会被触发. AngularJS内部的watch实现了页面随model的及时更新. $watch方法在用的时候主要是手动的监听一个对象,但对象发生变化时触发某个事件. (2)watch方法用法 $watch(watchFn,watch

  • Angular中ng-options下拉数据默认值的设定方法

    Angular中ng-options下拉数据默认值的设定方法

    今天学习了一下Angular中ng-options下拉数据默认值的设定方法,留个笔记 直接上代码 <div class="form-group"> <label class="col-sm-2 control-label">教师</label> <div class="col-sm-10"> <select style="display:block; width:100%; heig

  • angular中实现li或者某个元素点击变色的两种方法

    本文介绍了angular中实现li或者某个元素点击变色的两种方法,分享给大家,希望对大家有帮助 先说一种最直接了当的不需要js控制. 方法一:直接在用ng-class就可以控制: <p ng-click="state=1;" ng-class="{active:state==1}">浮伤年华</p> <p ng-click="state=2;" ng-class="{active:state==2}&quo

  • 详解Angular中实现自定义组件的双向绑定的两种方法

    在 Angular 中,对于表单元素,通过 [(ngModel)] 即可以简单地实现双向绑定.对于自定义组件而言,希望实现同样的效果可以怎么做呢? 1 实现自定义组件的 ngModel 指令 如果希望自定义组件能够具有与表单元素相同的 ngModel 效果,可以通过在组件内实现 ControlValueAccessor 接口达到目的. 对于 [(ngModel)] ,需要至少实现该接口的如下方法: interface ControlValueAccessor { writeValue(obj:

  • 在Angular中使用JWT认证方法示例

    本文介绍了在Angular中使用JWT认证方法示例,分享给大家,具体如下: 项目地址: grading-system 基于session的认证和基于token的认证的方式已经被广泛使用.在session认证中,服务端会存储一份用户登录信息,这份登录信息会在响应时传递给浏览器并保存为Cookie,在下次请求时,会带上这份登录信息,这样就能识别请求来自哪个用户. 在基于session的认证中,每个用户都要生成一份session,这份session通常保存在内存中,随着用户量的增加,服务端的开销会增大

随机推荐