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