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
练习----待办事项列表
待办事项列表
添加事项
练习:创建员工信息列表
张三 |
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 的特点是 每隔三位 一个 . ,四舍五入
参考图