Angular管道操作符(

2023-10-27

一、模板表达式操作符

模板表达式语言使用了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;
  }
}

显示结果:


更多:

Angular 安全导航操作符(?.)和空属性路径

Angular2开发环境搭建之VS Code

Angular CLI简介2

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Angular管道操作符( 的相关文章

随机推荐

  • 抽象类 接口

    1 抽象类 public abstract class AbstractClass 里面至少有一个抽象方法 public int t 普通数据成员 public abstract void method1 抽象方法 抽象类的子类在类中必须实
  • 功率时延谱(PDP)与三种选择性衰落

    衰落与弥散是无线信道的基本特性 电磁波经过无线信道传输后会使原本的信号在时域 频域 空域 角度 上产生弥散现象 导致波形在时间 频谱 空间上产生交叠 引起信号的失真 多径效应在时域上引起信号时延扩展 在频域上定义了相关带宽指标 当信号带宽大
  • k8s调度 原理_深入剖析k8s之默认调度器调度策略解析

    本篇专注在调度过程中 Predicates 和 Priorities 这两个调度策略主要发生作用的阶段 Predicates 首先 我们一起看看 Predicates Predicates 在调度过程中的作用 可以理解为 Filter 即
  • 如何使用nfsiostat来分析nfs存储性能问题

    nfsiostat介绍 Sysstat家族包括一个名叫nfsiostat的实用程序 它和iostat有诸多类似之处 它允许你监控NFS文件系统上的读写情况 其用法也和iostat类似 最基本的命令用法是跟上几个参数和两个数字 这两个数字分别
  • vue父子组件传值,父组件内容更新子组件内容不实时更新

    背景 vue父子组件传值不能实时更新问题 父组件将值传给了子组件 但子组件显示的值还是原来的初始值 并没有实时更新 总结了以下三种情况及解决方案 1 子组件没有正确监听父组件传递的值 在子组件中 确保正确地声明了props 并且监听了父组件
  • CVPR2023论文汇总

    点击下方卡片 关注 自动驾驶之心 公众号 ADAS巨卷干货 即可获取 点击进入 自动驾驶之心 全栈算法 技术交流群 CVPR2023中稿paper已经陆续放出来了 自动驾驶之心团队为大家整理了计算机视觉 BEV 分割 Occpuancy v
  • Vue的插槽与作用域插槽详解

    在Vue中 插槽 Slot 是一个非常强大且灵活的特性 用于在父组件中定义子组件的内容 Vue提供了两种主要类型的插槽 默认插槽 Slot 和作用域插槽 Scoped Slot 本篇博文将深入介绍这两种插槽类型 从基础到进阶 默认插槽 Sl
  • 打开一个php网页出现2个ip,php根据ip地址查地区

    自己以前做过一个程序 根据discuz里面的ip查询改的 ip地址所属地区计算 修改自 discuz 使用dicuz tinyipdata数据文件 将一些英文提示修改为汉字 is simple true的话显示到市 false显示到网通电信
  • maven项目中添加MySql依赖失败(以及maven的安装到maven项目的使用过程)

    maven项目中添加MySql依赖失败 以及maven的安装到maven项目的使用过程 1 maven项目中添加MySql依赖失败 报错信息 Dependency mysql mysql connector java not found 解
  • Cadence Allegro PCB设计88问解析(三十) 之 Allegro中 PCB的3D模型导出

    一个学习信号完整性仿真的layout工程师 在进行PCB投板之前 往往需要将PCB的结构发给结构的同事确认 一般会导出DXF和EMN文件 或者导出3D模型 3D模型包含版型 器件的实际3D模型等等 可以比较直观的看到PCB板上的器件情况 下
  • 【git 错误】git 使用中的问题汇总 不定期更新 git报错 Please enter a commit message to explain

    1 Please enter a commit message to explain why this merge is necessary 解决办法 1 按键盘字母 i 进入insert模式 2 修改最上面那行黄色合并信息 可以不修改 3
  • ImportError: /usr/lib/x86_64-linux-gnu/libstdc++.so.6: version `GLIBCXX_3.4.26‘ not foun Python GDAL

    前言 更新完pytorch1 9 0之后 突然GDAL包不能用了 但是代码调试的时候是正常的 本文给出具体的解决过程 提示一下 其实这种因为软件更新导致某个动态库不能通用的情况 一般的解决方法 就是在本机上查找一下有没有别的地方有 这样的解
  • ADAS先进驾驶辅助系统(Advanced Driver Assistant System)

    先进驾驶辅助系统 Advanced Driver AssistantSystem 简称ADAS 是利用安装于车上的各式各样的传感器 可侦测光 热 压力等变数 在第一时间收集车内外的环境数据 进行静 动态物体的辨识 侦测与追踪等技术上的处理
  • YOLOv7——目标检测数据集划分篇

    法一 1 准备VOC数据集 将所有数据集图片放入JPEGImages文件夹中 所有的图片对应的xml文件放入Annotations中 ImageSets文件夹中创建Main文件夹 暂时Main文件夹为空 文件夹结构 datasets Ann
  • 数据标准详细概述-2022

    1 数据标准的是什么 在实际的工作生产中 我们一般会参照国家标准 地方标准 行业标准等来进行具体的活动 来确保我们生成过程符合监管要求 便于上下游协同等 于是我们会见到如下的标准指导文件 同样 数据标准也会以文件的形式存在 在除了国标 行标
  • qq人脸更换_QQ安全中心现在怎么替换人脸设置或删除人脸?

    以下内容收集自网络 题主可以参考一下 1 我们从手机中打开QQ安全中心 如果还不是最新版本的话 请先升级到最新版本 2 在QQ安全中心首页 点击最下方的 工具 按钮 3 在 工具 页面 点击打开 实验室 这个图标 4 在打开的界面 点击打开
  • 四阶魔方玩法总结V1.0

    四阶魔方玩法总结V1 0 1 引言 今写此文 我主要是为了方便自己再次玩其魔方的时候 可以快速的想起 避免又从头学起 毕竟自己学会的 理解的 写出来的东西 再次玩魔方的时候 仅仅是回顾和追忆的过程 不存在学习 理解和消化的过程 避免再次浪费
  • 12.大数据之Hive性能优化

    hive性能调优 1 HADOOP计算框架特性 数据量大不是问题 数据倾斜是个问题 jobs数比较多的作业运行效率相对比较低 比如即使有几百行的表 如果多次关联多次汇总 产生十几个jobs 耗时很长 原因是map reduce作业初始化的时
  • 二叉树类型的常考选择题知识储备(二叉树的性质)

    1 若规定 根节点的层数为 1 则 一个非空二叉树的 第 i 层 上最多有 2i 1 i gt 0 个结点 2 若规定只有根节点的二叉树的深度为1 则 深度为 K 的二叉树的 最大结点数是 2k 1 k gt 0 3 对于任意一个二叉树 如
  • Angular管道操作符(

    一 模板表达式操作符 模板表达式语言使用了JavaScript 语法的子集 并补充了几个用于特定场景的特殊操作符 管道操作符 安全导航操作符 二 管道操作符 在绑定之前 表达式的结果可能需要一些转换 例如 可能希望吧数字显示成金额 强制文本