说我对照和表达，那这两个不一样吗？
<div *ngIf="expression">{{val}}</div>
<div [hidden]="!expression">{{val}}</div>
【问题讨论】：
标签： angular
它们之间实际上存在性能差异：
如果表达式为假，ngIf 将注释掉数据。这样甚至不会加载数据，从而导致 HTML 加载速度更快。
[hidden] 将加载数据并用 hidden HTML 属性标记它们。即使数据不可见，也可以通过这种方式加载数据。
所以 [hidden] 在我们希望显示/隐藏状态频繁变化时使用更好，例如在按钮单击事件上，这样我们就不必每次按钮都加载数据被点击，只需改变它的 hidden 属性就足够了。
请注意，小数据可能看不到性能差异，只有大对象才能看到。
【讨论】：
ngIf is a structural directive，它在 DOM 中创建/销毁内容。第二个语句只是用 css 隐藏/显示内容，即添加/删除 display:none 到元素的样式。
什么是结构指令？
结构指令负责 HTML 布局。他们塑造或 重塑 DOM 的结构，通常通过添加、删除或 操纵元素。
在第一种情况下，如果表达式是false 那么div 并且它的内容将不会被创建。在第二种情况下，div 和内容总是被创建，但如果表达式是 false，它们不可见。
【讨论】：
当您尝试操作包含在一个节中的结构中的元素时，它们之间实际上还有另一个区别：
ngIf 如果您在为 false 时尝试引用该部分中的元素，则会导致代码中出现未定义的错误。
[hidden] 如果您在该部分隐藏时尝试引用该部分中的元素，则不会导致代码中出现未定义错误。
所以当我们想要对被包裹部分中的元素进行操作时，最好使用 [hidden]。
【讨论】：
*ngIf 如果为 false 将从 DOM 中删除元素
如果为真则隐藏将在 css 中将显示设置为无
【讨论】：
另一个关键点，它可能会破坏 *ngIf 块内的 mat-paginator。例如
.HTML
<div *ngIf="myCondition">
<mat-paginator #seeMe ...></mat-paginator>
</div>
.TS
this.dataSource.paginator = this.seeMe; // seeMe becomes underfined
解决方案：
【讨论】：
*ngIf 将在 DOM 中包含和删除元素。 angular2 中的 [hidden] 相当于我们在 AngularJS 中的 ngshow 和 nghide。它只是通过添加 display:none 和 display:block 来显示和隐藏元素。
【讨论】：
场景 :--> 假设您正在使用 Behaviorsubject，它会发出布尔值“真/假”。
案例 1 --> *ngIf --> 如果 Behaviorsubject 返回初始值 false，则该 DOM 将消失。并且即使它稍后发出真值，它也不会可见。
案例 2 --> 隐藏 --> 它将根据 Behaviorsubject 发出的值完美运行。即它将切换 DOM。
注意 - *ngIf 也会切换 DOM，但会在用户的操作或 DOM 事件上切换 ngIf 的值。
【讨论】：