Angular学习---filter过滤器（管道pipe）

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 的特点是 每隔三位 一个 . ，四舍五入

 

参考图