显示和隐藏元素是, Angular是通过修改数据模型DOM的方式来驱动UI刷新，然后通过指令把变更反应到UI上。
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: 也是接收一个bool值,当值为false时,它所控制的节点并不会被创建,也可以说之前的DOM节点会被销毁掉,哪怕这个节点里面包含有很ng指令的绑定都不会去执行. 所以在我们的项目中,如果没有必要一次性生成完所有的dom,那么就可以用ng-if来按需生成,从而加快了dom的加载速度.特别是在repeat的时候,每条数据又包含了复杂的数据结构的时候效果特别明显,因为只有当ng-if的传入值为true的时候,才会创建它所控制的节点.
html
<span *ngIf="switch">xxx金额:{{usableBonus | number:'1.2-2'}}元; </span>component.ts
export class xxxxComponent implements OnInit { switch: Boolean= false;false不显示 true显示。
在远古时代，原生js是这样实现隐藏，显示的
<html> <body> <div id= "yjj">XXX</div> </body> </html> <script> var btn = document.getElementById("yjj"); btn.onclick =function(){ alert("success"); btn.style.display = 'none'} </script>二 用 hidden
<p-column field="id" hidden="hiddenInComponent"></p-column>在component.ts里面 hiddenInComponent : boolean = false / true
