angular中常见的管道及用法

原文链接：https://www.longkui.site/program/frontend/angular-pipe/5147/

上一篇文章中，简单介绍了angular中自定义管道的使用：

angular中如何自定义一个管道

这篇文章介绍一下，angular中自带的一些好用管道。

1.日期管道
{{ dateTime | date:‘yyyy-MM-dd HH:mm:ss’}} // 2022-12-12 11:21:21

{{ dateTime | date:‘medium’ }} // 2022年12月12日上午11:21:21

{{ dateTime | date:‘short’ }} // 2022/12/12 上午10:21

{{ dateTime | date:‘fullDate’ }} // 2022年12月12日星期六

{{ dateTime | date:‘longDate’ }} // 2022年12月12日

{{ dateTime | date:‘mediumDate’ }} // 2022年12月12日

{{ dateTime | date:‘shortDate’ }} // 2022/12/12

{{ dateTime | date:‘mediumTime’ }} // 上午10:21:21

{{ dateTime | date:‘shortTime’ }} // 上午10:21
2.保留小数
{{data.money|number:‘1.2-2’}}
意味保留两位小数，

它的格式是下面这样：

digitsInfo={minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}。

minIntegerDigits：小数点前的最小整数位数。默认是1。
minFractionDigits：小数点后的最小位数。默认是0。
maxFractionDigits：小数点后的最大位数。默认是3。

3.大小写转换
全部转换成大写

全部转换成小写

4.JSON序列化这个一般用于调试的时候，在页面中显示json数据，比如我有下面这样的数据json数据：

object = {
name: “张三”,
age: “2”,
“id”:2
}
然后在页面上使用下面的代码

结果是

{ “name”: “张三”, “age”: “2”, “id”: 2 }
然后，这个管道也接受数组形式，比如下面这样：

object = [{
name: “张三”,
age: “2”,
“id”: 2
},
{
name: “李四”,
age: “2”,
“id”: 3
},
]
5.字符串截取
str1 = “hello world”

结果是： hel

6.货币管道
主要用来显示货币，比如下面这样

str2=‘12345678’
str3=87654321

结果为

€12,345,678.00
CN¥87,654,321.00
特别注意的是，人民币并不是RMB，而是CNY

其他的国家或者地区的货币简写可以参考下面的文章：

常见的货币及其英文缩写简写

7.百分比管道
str4=“1234”

结果为：

123,400%
这个管道会将数据乘100。

8.标题管道
这个管道可以将句子的首字母大写，实际开发中没怎么用过。

str1 = “hello world”

结果

Hello World

angular中常见的管道及用法相关推荐

简述angular中constant和$filter的用法
这里是修真院前端小课堂,每篇分享文从 [背景介绍][知识剖析][常见问题][解决方案][编码实战][扩展思考][更多讨论][参考文献] 八个方面深度解析前端知识/技能,本篇分享的是: [简述angul ...
angular中forRootforChild的作用
angular中forRoot&forChild的作用用法 import { NgModule, ModuleWithProviders } from '@angular/core'; im ...
常见 Oracle HINT 的用法
Hint 是Oracle 提供的一种SQL语法,它允许用户在SQL语句中插入相关的语法,从而影响SQL的执行方式. Oracle 19c HINT Comments https://docs.ora ...
day12_oracle hint——SQL优化过程中常见Oracle中HINT的30个用法
在SQL语句优化过程中,经常会用到hint, 以下是在SQL优化过程中常见Oracle中"HINT"的30个用法 1. /*+ALL_ROWS*/ 表明对语句块选择基于开销的优化方 ...
ngzorro html源码,Angular 中 ngTemplateOutlet 的用法以及ng-zorro源码分析！
一.引言今天看到文章:https://segmentfault.com/a/1190000015944548 .于是专门研究一下ngTemplateOutlet用法!!!! 官方定义 : NgTem ...
东方时尚网上约车的用户名密码是什么_网站制作要学什么、在现代网页设计中，动效常见的几种用法...
常听到有人这样问:"网站制作要学什么"和"在现代网页设计中,动效常见的几种用法"有什么关系和内在关联?导航设计是网页可用性的基石.记住,如果用户在您的网站里找不 ...
JavaScript中常见的字符串操作函数及用法汇总
转载地址:http://www.jb51.net/article/65358.htm 这篇文章主要介绍了JavaScript中常见的字符串操作函数及用法,实例汇总了javascript常见的字符串转换 ...
【American English】美语口语中常见的 Gonna、wanna、gotta 含义及用法
1 [American English]美式发音,英语发音,美国音音标列表及发音 2 [American English]美语的连读规则 3 [American English]美语口语中常见的 Go ...
C语言中常见的符号和注释的用法
文章目录前言一.换行符号\n \n的具体用法和作用二.取地址符号& &的具体用法和作用三.注释注释的格式注释的作用注释在代码中的具体体现总结前言本篇文章主要给大家讲 ...

angular中常见的管道及用法

angular中常见的管道及用法相关推荐

最新文章

热门文章