Angular中的管道(Pipe)

Angular中的管道(Pipe)


文章目录

  • Angular中的管道(Pipe)
    • 前言
    • 一、内置管道
      • 1. date管道格式化日期
      • 2. currency管道格式化货币
      • 3. uppercase和lowercase管道转换字符串大小写
      • 4. 小数位数
      • 5. JavaScript 对象序列化
      • 6. slice
      • 7. 管道链
    • 二、自定义管道


前言

Angular中的管道(Pipes)是一种强大的工具,用于处理和转换数据,并将其呈现在视图中。这些管道可以执行各种任务,如排序、格式化和过滤数据。它们提供了一种方便的方式来在HTML模板中转换数据,使得数据的展示更符合用户的需要。

管道的基本用法是,通过声明一个管道类来定义一个管道。在管道类中,通常会有一个transform方法,该方法负责接收输入数据,并将其转换为所需的输出格式。然后,在模板中,可以使用管道操作符 | 将管道应用于数据,从而将数据转换为所需的格式。

Angular提供了多种内置的管道,如date管道用于格式化日期,currency管道用于格式化货币值,uppercase和lowercase管道用于转换字符串的大小写等。这些内置管道能够满足大多数常见的数据转换需求。

此外,Angular还支持自定义管道。开发者可以根据自己的需求创建自定义管道,实现特定的数据转换逻辑。自定义管道可以带有参数,以便在使用时提供额外的配置选项。

需要注意的是,Angular中的管道分为纯管道和非纯管道。纯管道只会在输入数据发生基本类型的变化或引用类型引用的变化时触发转换。而非纯管道则会在任何输入值的变化时都触发转换,包括对象属性的变化。因此,在选择使用哪种类型的管道时,需要根据具体的需求和性能考虑来决定。

一、内置管道

1. date管道格式化日期

short: 等价于 M/d/yy, h:mm a(例如:6/15/15, 9:03 AM)
medium: 等价于 MMM d, y, h:mm:ss a(例如:Jun 15, 2015, 9:03:01 AM)
long: 更详细的日期和时间(包括星期和时区)
full: 包含星期、日期、月份、年份和时间的完整格式
shortDate: 只包含日期部分(例如:M/d/yy)
mediumDate: 更详细的日期格式(例如:MMM d, y)
longDate: 更长的日期格式
shortTime: 只包含时间部分(例如:h:mm a)
mediumTime: 更详细的时间格式(例如:h:mm:ss a)

此外,你还可以使用特定的模式字符串来定义自定义的日期和时间格式。例如:

yyyy-MM-dd: 年-月-日格式(例如:2023-04-30)
HH:mm:ss: 24小时制的时间格式(例如:14:30:00)

这是一个示例代码

app.component.html

<p>今天的日期是:{{ currentDate | date:'fullDate' }}</p>
<p>今天的日期是:{{ currentDate | date:'longDate' }}</p>
<p>今天的日期是:{{ currentDate | date:'shortTime' }}</p>
<p>今天的日期是:{{ currentDate | date:'yyyy-MM-dd HH:mm:ss' }}</p>

app.component.ts

  currentDate = new Date();  

在这里插入图片描述

2. currency管道格式化货币

currency管道主要依赖于两个参数:

货币代码(Currency Code): 这是一个遵循ISO 4217标准的货币代码,用于指定要格式化的货币类型。例如,'USD’代表美元,'EUR’代表欧元,'CNY’代表人民币等。

显示符号(Display Symbol): 这是一个布尔值,用于指示是否应该在格式化后的字符串中包含货币符号。例如,如果设置为true,并且货币代码是’USD’,则格式化后的字符串将包含美元符号($)。如果设置为false,则不会包含货币符号。

USD:美元(United States Dollar)
EUR:欧元(Euro)
GBP:英镑(Great Britain Pound)
JPY:日元(Japanese Yen)
CNY:人民币(Chinese Yuan)
RUB:俄罗斯卢布(Russian Ruble)
AUD:澳元(Australian Dollar)
CAD:加元(Canadian Dollar)

还有很多

app.component.html

<p>商品价格:{{ productPrice | currency:'RMB':true }}</p>
<p>商品价格:{{ productPrice | currency:'CNY':true }}</p>
<p>商品价格:{{ productPrice | currency:'USD':true }}</p>
<p>商品价格:{{ productPrice | currency:'EUR':true }}</p>
<p>商品价格:{{ productPrice | currency:'EUR':false }}</p>

app.component.ts

  productPrice = 9.99;  

在这里插入图片描述
这里的CNY输出的时候变成了商品价格:CN¥9.99,好像是本地化配置不对,还没找到解决方法。

用另外一种方式输出

app.component.ts 声明一个方法

  formatCurrency(value: number): string {  return '¥' + value.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',');  } 

直接在app.component.html调用就行

<p>商品价格:{{ formatCurrency(productPrice) }}</p>

在这里插入图片描述

3. uppercase和lowercase管道转换字符串大小写

app.component.html

<p>原始字符串:{{ message }}</p>  
<p>大写字符串:{{ message | uppercase }}</p>  
<p>小写字符串:{{ message | lowercase }}</p> 

app.component.ts

  message = 'Hello, Angular!';  

在这里插入图片描述

4. 小数位数

app.component.html

<!-- 接收的参数格式为{最少整数位数}.{最少小数位数}-{最多小数位数} -->
<p>{{num | number:'1.2-4'}}</p>

app.component.ts

  num = 54545641.99666666

在这里插入图片描述

5. JavaScript 对象序列化

app.component.html

<p>{{ { name: 'semlinker',age:18,sex:'男' } | json }}</p>

在这里插入图片描述

6. slice

<p>{{ 'semlinker' | slice:0:3 }}</p>

在这里插入图片描述

7. 管道链

<p>{{ 'semlinker' | slice:0:3 | uppercase }}</p>

在这里插入图片描述

二、自定义管道

自定义管道(Pipe)是一个用于在模板表达式中对值进行转换的类。它们可以被用来格式化文本、转换数据类型等。以下是一个简单的自定义管道示例,它将输入的文本进行重复。

创建一个新的 TypeScript 文件repeat.pipe.ts, 在你的 Angular 项目中,并在其中定义你的管道类。

import { Pipe,PipeTransform } from "@angular/core";@Pipe({name:'repeat'
})export class RepeatPipe implements PipeTransform{transform(value: string, times: number = 1): string {  if (!value) return '';  if (times < 1) return value;  return value.repeat(times);  }
}
<p ngNonBindable>{{ 'lo' | repeat:3 }}</p>
<p>{{ 'lo' | repeat:3 }}</p>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/5448.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Qt之OpenGL】01创建OpenGL窗口

1.创建子类继承QOpenGLWidget 2.重写三个虚函数 /** 设置OpenGL的资源和状态,最先调用且调用一次* brief initializeGL*/ virtual void initializeGL() override; /** 设置OpenGL视口、投影等&#xff0c;当widget调整大小(或首次显示)时调用* brief resizeGL* param w* para…

四、线段、矩形、圆、椭圆、自定义多边形、边缘轮廓和文本绘制(OpenCvSharp)

功能实现&#xff1a; 对指定图片上进行绘制线段、矩形、圆、椭圆、自定义多边形、边缘轮廓以及自定义文本 一、布局 用到了一个pictureBox和八个button 二、引入命名空间 using System; using System.Collections.Generic; using System.Drawing; using System.Windows.F…

【MySQL | 第九篇】重新认识MySQL锁

文章目录 9.重新认识MySQL锁9.1MySQL锁概述9.2锁分类9.2.1锁的粒度9.2.2锁的区间9.2.3锁的性能9.2.4锁的级别 9.3拓展&#xff1a;意向锁9.3.1意向锁概述9.3.2意向锁分类9.3.3意向锁作用&#xff08;1&#xff09;意向锁的兼容互斥性&#xff08;2&#xff09;例子1&#xff08…

【Flutter】极光推送配置流程(小米厂商通道) 章二

前言 继【Flutter】极光推送配置流程(极光通道/华为厂商/IOS) 章一 并且&#xff0c;我大概率不会去修改第一篇文章的内容。 随着我自己在配置公司的项目的同时&#xff0c;我希望一直更新这个推送系列文章。 在章一配置完后&#xff0c;也是出现了一些问题&#xff0c;所以本…

PHP算命源码_最新测算塔罗源码_可以运营

众筹商城源码 众筹商品平台 商城加共识元富之路 网上商城众筹 前端是编译后的&#xff0c;后端PHP&#xff0c;带商城 运行截图 源码贡献 https://githubs.xyz/boot?app39 部分数据库表 CREATE TABLE ti_shopro_store (id int(11) NOT NULL AUTO_INCREMENT COMMENT ID,nam…

当Kubeflow遇上GPU池化

随着人工智能技术的迅猛发展&#xff0c;AI开发已成为企业创新的重要驱动力。然而&#xff0c;在AI开发过程中&#xff0c;企业面临着诸多挑战&#xff0c;如开发工具的选择和开发资源如何高效利用等。本文将围绕这些挑战&#xff0c;探讨GPU池化如何赋能Kubeflow进行AI开发&am…

实验八智能手机互联网程序设计(微信程序方向)实验报告

请在上一次实验的基础之上完成“手机快速注册”页面、“企业用户注册”页面&#xff0c;并实现点击手机快速注册和企业用户注册后转跳至该页面在“手机快速注册”页面&#xff0c;输入框内输入内容并失去焦点后&#xff0c;下方的按钮会变化 在企业用户注册页面&#xff0c;用户…

【网站项目】木里风景文化管理平台

&#x1f64a;作者简介&#xff1a;拥有多年开发工作经验&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的项目或者毕业设计。 代码可以私聊博主获取。&#x1f339;赠送计算机毕业设计600个选题excel文件&#xff0c;帮助大学选题。赠送开题报告模板&#xff…

在Linux操作系统中的磁盘分区管理案例

1.在硬盘sdb上创建不同的分区实例练习 Linux操作系统是安装在硬盘sda硬盘中&#xff0c;所以不要轻易动硬盘sda中的文件信息 有如下需求 创建主分区 500M 文件系统 ext4 挂载点 /web 创建主分区 500M 文件系统 ext4 挂载点 /nginx 创建逻辑分区 500M 文件系…

【webrtc】MessageHandler 4: 基于线程的消息处理:以Fake 收发包模拟为例

G:\CDN\rtcCli\m98\src\media\base\fake_network_interface.h// Fake NetworkInterface that sends/receives RTP/RTCP packets.虚假的网络接口,用于模拟发送包、接收包单纯仅是处理一个ST_RTP包 消息的id就是ST_RTP 类型,– 然后给到目的地:mediachannel处理: 最后消息消…

GPT3 终极指南(二)

原文&#xff1a;zh.annas-archive.org/md5/6de8906c86a2711a5a84c839bec7e073 译者&#xff1a;飞龙 协议&#xff1a;CC BY-NC-SA 4.0 第五章&#xff1a;GPT-3 作为企业创新的下一步 当一个新的创新或技术转变发生时&#xff0c;大公司通常是最后一个采纳的。它们的等级结构…

虚拟机安装与配置win7

一、安装镜像 Windows7 64位 ed2k://|file|cn_windows_7_ultimate_with_sp1_x64_dvd_u_677408.iso|3420557312|B58548681854236C7939003B583A8078|/ 建议迅雷下载 二、VMware 安装win7 1.新创自定义虚拟机 2.默认即可 3.iso文件我们自己下载&#xff0c;选择一个空的磁盘 4.…

【记录】Python3| 将 PDF 转换成 HTML/XML(✅⭐⭐⭐⭐pdf2htmlEX)

本文将会被汇总至 【记录】Python3&#xff5c;2024年 PDF 转 XML 或 HTML 的第三方库的使用方式、测评过程以及对比结果&#xff08;汇总&#xff09;&#xff0c;更多其他工具请访问该文章查看。 文章目录 pdf2htmlEX 使用体验与评估1 安装指南2 测试代码3 测试结果3.1 转 HT…

闪存存储和制造技术概述

闪存存储技术 引言 性能由高到低排序&#xff1a;SLC -> MLC -> TLC -> QLC 根据这个排序读写速度也越来越低&#xff0c;价格越来越便宜 1. SLC SLC&#xff08;Single-Level Cell&#xff0c;单层单元&#xff09;&#xff1a; SLC 闪存具有最高的性能、耐用性和可…

【专篇】DDR3 SDRAM-01总体介绍

概念 DDR3 SDRAM(Double-Data-Rate 3 Synchronous Dynamic Random-Access Memory,第三代双倍速率同步动态随机存取存储器)是计算机存储技术的一种重要进步,它在前代DDR2 SDRAM的基础上进行了多项改进和优化。以下是DDR3 SDRAM的特点介绍: 双倍速率(DDR):DDR3 SDRAM采用…

c#数据库: 4.修改学生成绩

将4年级的学生成绩全部修改为100分,。修改前的学生信息表如图所示: using System; using System.Collections.Generic; using System.Data.SqlClient; using System.Linq; using System.Text; using System.Threading.Tasks;namespace StudentUpdate {internal class Program{s…

Ubuntu如何更换 PyTorch 版本

环境&#xff1a; Ubuntu22.04 WLS2 问题描述&#xff1a; Ubuntu如何更换 PyTorch 版本考虑安装一个为 CUDA 11.5 编译的 PyTorch 版本。如何安装旧版本 解决方案&#xff1a; 决定不升级CUDA版本&#xff0c;而是使用一个与CUDA 11.5兼容的PyTorch版本&#xff0c;您可…

c#数据库: 10.调用存储过程查询信息,并显示在窗体上

查询女生信息&#xff0c;并将信息显示在窗体上: 原数据表//右键数据库名,新建查询 ------------- 新建查询窗口,添加新建存储过程Procedure_GetGirls1和查询代码如下 : CREATE PROCEDURE dbo.Procedure_GetGirls1 /*存储过程名称*/ AS SELECT * f…

【docker】Spring Boot3.x 打包 Docker容器

Docker化Spring Boot应用 创建文件夹 demo mkdir democd demo创建Dockerfile # 两个 openjdk 二选一 #FROM openjdk:17-jre-alpineFROM eclipse-temurin:17MAINTAINER chengxuyuanshitang <chengxuyuanshitangXX.com>RUN mkdir -p /workspace/java/demoCOPY demo.ja…