Angular学习---filter过滤器(管道pipe)

2023-11-03

angular核心概念 -----过滤器 Filter ---应用;如当后台传入数据用1,2 代表性别,可以用过滤器进行更改.如上 练习:创建员工信息列表 中 的员工性别

过滤器在angular2以后改名为 管道(pipe),详见新建的sex.pipe.ts文件

创建管道对象的简便工具 ---- ng g pipe 管道名

扩展 -- angular 提供的 pipe 方法 --- (1)LowerCasePipe 把文本转换成全小写形式。 (2)UpperCasePipe 把文本转换成全大写形式 (3)TitleCasePipe 把文本转换成标题形式。 把每个单词的第一个字母转成大写形式,并把单词的其余部分转成小写形式。 单词之间用任意空白字符进行分隔,比如空格、Tab 或换行符。

(4)SlicePipe 从一个 Array 或 String 中创建其元素一个新子集(slice)。 初始值 | slice : start [ : end ] }} 。效果如下 -- 只显示字符串的一部分,规定显示多少个字符串,溢出隐藏

容付费用户可见

-->

Hello

显示隐藏*ngIf='xxx; else 另一个标签的编号a' --ng-template标签中 #另一个标签的编号a

点击控制显示123或者456显示456

练习---点击按钮 加载更多--变成 已经没有了

加载更多

[ngStyle]的使用----`[ngStyle]='xxxObj' == ts文件夹中 xxxObj = 尖括号 --- xxxObj 是一个对象。但是遵循高聚合,低耦合原理,样式最好还是写在CSS中,不推荐这么写,可以加类名改变样式,如下的 [ngClass]---供了解`

绿色点击变红


[ngClass]的使用----第一步---在css文件夹里定义类名。 第二步---给标签绑定[ngClass]='xxObj' 。第三步---在ts文件里定义

红色点击变蓝色


[ngSwitch]的使用

普通用户

[(ngModel)]的使用 ---- 手动导入 import FormsModule from '@angular/forms' 并在import 中 使用 FormsModule

浏览器模块,其中包括CommonModule ( 包含 ngFor / ngIf... 不包含ngModel ----- ngModel 是 FormsModule --- 需要在文件 app.module.ts 中 手动导入 import FormsModule from '@angular/forms' 并在import 中 使用 FormsModule imports: [ BrowserModule, FormsModule ])

当前用户输入为 张三

Angular 专用事件---处理模型数据的改变--- (ngModelChange)

练习:注册新用户时,密码字段随着输入的进行,后 面SPAN中显示提示文字,可能为 密码长度应该在6~12位之间 密码太短 密码长度合适 密码太长了

提示:密码长度应该在6~12位之间

扩展--双肩括号里可以直接写方法--- 如

请输入

值为

组件指令--- ng 中的 component 继承自 directive

自定义指令 -- ng g directive 自定义指令名 ---- 如 自定义指令 --需要强调

123

123

123

练习----待办事项列表

待办事项列表

添加事项

  • 1---张三 删除
  • 2---李四 删除

练习:创建员工信息列表

张三 10 删除
李四 11 删除
赵云 12 删除

angular核心概念 -----过滤器 Filter ---应用;如当后台传入数据用1,2 代表性别,可以用过滤器进行更改.如上 练习:创建员工信息列表 中 的员工性别

过滤器在angular2以后改名为 管道(pipe),详见新建的sex.pipe.ts文件

创建管道对象的简便工具 ---- ng g pipe 管道名

扩展 -- angular 提供的 pipe 方法 --- (1)LowerCasePipe 把文本转换成全小写形式。 (2)UpperCasePipe 把文本转换成全大写形式 (3)TitleCasePipe 把文本转换成标题形式。 把每个单词的第一个字母转成大写形式,并把单词的其余部分转成小写形式。 单词之间用任意空白字符进行分隔,比如空格、Tab 或换行符。

(4)SlicePipe 从一个 Array 或 String 中创建其元素一个新子集(slice)。 初始值 | slice : start [ : end ] }} 。效果如下 -- 只显示字符串的一部分,规定显示多少个字符串,溢出隐藏

姓名张...
姓名李...
姓名赵...

(5)JsonPipe --- 因为Angular里的JSON.strinify 不可以用,angular 提供了一个JsonPipe 管道方法。把一个值转换成 JSON 字符串格式。在调试时很有用。如下

员工列表 [ { "empName": "张三", "age": 10, "sex": 1, "number": 33122.2222 }, { "empName": "李四", "age": 11, "sex": 2, "number": 5122.2333 }, { "empName": "赵云", "age": 12, "sex": 1, "number": 666122.23456 } ]

(6)DecimalPipe --- 把金额每隔三位加一个逗号。 把数字转为字符串。每几位可以加一个小数点,分隔符,或者四舍五入。里面有number --- 语法 : 双尖括号 初始值 | number 双尖括号 。

number 的特点是 每隔三位 一个 . ,四舍五入

 

参考图

 

 

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

Angular学习---filter过滤器(管道pipe) 的相关文章

随机推荐

  • 众享比特未来融合研究院执行院长王陈慧子博士以第一作者在IEEE TCSS上发表论文

    近日 众享比特未来融合研究院执行院长王陈慧子博士为第一作者 通讯作者的学术论文 Toward Understanding Attention Economy in Metaverse A Case Study of NFT Value 探究
  • nvidia-smi 无进程占用GPU,但GPU显存却被占用了很多

    下图是我当时遇到的问题 如上图 GPU1 显示占用了10G多的显存 但是却没有相应的进程 此时可使用如下命令查看进程 fuser v dev nvidia 显示如下图 此时把这些进程全部 kill 掉 kill 9 5142 5143 51
  • win10误删的注册表能还原吗_win10注册表删错了怎么办_win10注册表删错东西如何恢复-win7之家...

    我们要知道 注册表是Microsoft Windows中的一个重要的数据库 用于存储系统和应用程序的设置信息 在win10系统中 用户可以通过修改注册表来保证电脑的安全 可是近日有的用户在修改注册表时不小心删错了 那么win10注册表删错了
  • 分页居中显示

    div class page number div div div page number width 100 height 80px padding top 10px text align center page number1 disp
  • 如何阅读芯片手册

    原视频链接 如何快速阅读芯片数据手册 初学者和外行进 1 芯片手册的结构 1 Features 特性 对芯片的特点进行了总结 2 General Description 概述 把芯片的功能进行了一个大概的总结 这部分对新手来说很重要 每一个
  • SDIO接口(4)——SDIO通信

    SDIO通信 SD总线上的通信基于命令和数据位流 这些命令和数据位流由起始位启动 并由停止位终止 SDIO总线上的设置和控制都是通过命令来实现 SDIO总线上都是HOST端发起请求 然后DEVICE端回应请求 其中请求和应答中会包含数据信息
  • 香橙派4和树莓派4B构建K8S集群实践之八: TiDB

    目录 1 说明 2 准备工作 3 安装 3 1 参考Tidb官方 v1 5安装说明 3 2 准备存储类 3 3 创建crd 3 4 执行operator 3 5 创建cluster dashboard monitor容器组 3 6 设置访问
  • Android BottomNavigationView的使用

    BottomNavigationView大于3个menu文字和icon都显示 代码中设置 public static void disableShiftMode BottomNavigationView view int count vie
  • 使用Java对轨迹进行抽稀,并生成mvt(Map Vector Tile)瓦片

    Java对轨迹进行抽稀 并生成mvt线瓦片 1 原理 2 pom依赖 3 Java对轨迹道格拉斯普克抽稀源码 4 Java生成线瓦片源码 参考 1 原理 Java对轨迹抽稀 道格拉斯普克算法 生成mvt瓦片 VectorTileEncode
  • mysql tinyint和char(1)性能对比

    在数据库设计的时候会遇到很多只需要0 1 2这种固定几个值的状态字段 基本上都建议设置为只占一字节的tinyint类型 有些觉得char 1 是一样 毕竟char 1 存储数字和字母时一个字符也只是占一个字节 mysql是用c 写的 而在c
  • 蓝桥杯-小数第n位-2017-国赛

    小数第n位 文章目录 小数第n位 分析 代码 参考材料 题目描述 我们知道 整数做除法时 有时得到有限小数 有时得到无限循环小数 如果我们把有限小数的末尾加上无限多个 0 它们就有了统一的形式 本题的任务是 在上面的约定下 求整数除法小数点
  • VSCode配置之Opencv4x终极奥义

    苦于windows下编译opencv的效率和对于大型软件如Visual Studio 2017 Visual Studio S2019等的不习惯 希望VScode也能够快速 高效编译第三方库 如opencv等 花了大概两天的时间 分析了主流
  • 【Where和having的区别】条件语句where和having有什么不同?

    Where 总之 WHERE 关键字的特点是 直接用表的字段对数据集进行筛选 如果需要通过关联查询从其他的表获取需要的信息 那么执行的时候 也是先通过 WHERE 条件进行筛选 用筛选后的比较小的数据集进行连接 这样一来 连接过程中占用的资
  • iostat 命令

    NAME iostat Report Central Processing Unit CPU statistics and input output statistics for devices partitions and network
  • 计算机组成原理与系统结构期末复习题(2)

    计算机组成原理与系统结构 选择题 1 冯 诺依曼机工作的基本方式的特点是 B A 多指令流单数据流 B 按地址访问并顺序执行指令 C 堆栈操作 D 存贮器按内容选择地址 2 完整的计算机应包括 D A 运算器 存储器 控制器 B 外部设备和
  • VS环境下Qt工程.UI文件不生成头文件的问题

    在VS环境下创建的Qt工程会出现 UI文件不生成头文件的问题 可以通过右击 ui文件 点击编译生成头文件 但是 我创建的工程的 ui文件不能编译 右键编译选项是灰的 这种情况下 我想到的办法是 重新添加一个带UI文件的GUI类 与工程同名
  • openmvg2.0编译与使用

    目录 写在前面 获取代码 github 网盘 编译 使用 稠密重建 参考 完 写在前面 1 openmvg是一个用于实现structure from motion的开源库 实现了完整的sfm pipeline 并有说明文档 https op
  • css文本换行加省略号

    overflow hidden text overflow ellipsis white space nowrap 可以显示的行数 超出部分用 表示 webkit box orient vertical 控制显示行数 webkit line
  • 某企业每月给其A、B、C 和D 四个门店一共发送6 个集装箱的某种货物,如果各门店出售该种货物的利润(万元)如下表:

    某企业每月给其A B C 和D 四个门店一共发送6 个集装箱的某种货物 如果各门店出售该种货物的利润 万元 如下表 试求这6 箱货物如何分配给各门店 才能获得最大总利润 解题思路 将问题按卖场分为四个阶段 将A B C D四个卖场分别编号为
  • Angular学习---filter过滤器(管道pipe)

    angular核心概念 过滤器 Filter 应用 如当后台传入数据用1 2 代表性别 可以用过滤器进行更改 如上 练习 创建员工信息列表 中 的员工性别 过滤器在angular2以后改名为 管道 pipe 详见新建的sex pipe ts