今天完成的事情：任务样式搞出来了，

明天计划的事情：表单任务的JS部分；

遇到的问题：任务中用 ts 模块完成JS的需求还不会写；

收获：结构型指令：

用ng

*ngIf , *ngFor … 在angular里被称为是结构型指令.

所谓结构型指令,就是它能够塑造或重塑DOM的结构. 就是在渲染的时候它能够帮你增加,删除,维护这些元素.

ng-show（显示） / ng-hide（隐藏）:

ng-show是满足条件就显示 , ng-hide是满足条件就隐藏.

因为它们用法一样, 只写了 ng-show.

ng-show 接收的是一个 boolean（布尔）值,当为值 true 的时候就去展示 DOM 节点,当值为 false 的时候, 在dom节点上就添加一个 ng-hide 的类,这个类的样式是" display:none （ 隐藏 ）" .

在DOM节点被加载的时候, ng-show 里面的所有节点都会被加载 , 也就是说 ng-show 仅仅是隐藏和显示DOM节点而已.也就说当存在很多ng-show指令时候,即使它们不显示,但是它们所在的DOM节点还是会被浏览器渲染的 .

ng-switch :

ng-switch 要先监听一个变量 , 当此变量为什么值的时候下面就显示什么内容 .

举个例子:

ng-switch 监听了一个 type 这么一个变量 , 当 type 的值等于 "a" 的时候,那么这块区域就会被创建并显示 ; 当type的值为 "b" 的时候,这块区域 (a所控制的区域)就会被销毁,然后 "b" 所控制的那个区域(dom)就会被创建并且显示.

 ng-if :

也是接收一个 boolean 值, 当值为false时,它所控制的节点并不会被创建, 也可以说之前的 DOM 节点会被销毁掉, 哪怕这个节点里面包含有很 ng 指令的绑定都不会去执行.

所以在我们的项目中 , 如果没有必要一次性生成完所有的dom ,那么就可以用 ng-if 来按需生成 , 从而加快了 dom 的加载速度.特别是在 repeat 的时候,每条数据又包含了复杂的数据结构的时候效果特别明显,因为只有当 ng-if 的传入值为 true 的时候,才会创建它所控制的节点.

html :

component.ts:

false不显示 ; true显示。

在远古时代，原生js是这样实现隐藏，显示的

用 hidden :

在component.ts里面: