Question

说我检查它和表达，然后这两个不一样吗？

<div *ngIf="expression">{{val}}</div>

<div [hidden]="!expression">{{val}}</div>

Answer 1

ngIf is a structural directive，它会在DOM中创建/销毁内容。第二个语句隐藏/显示带有css的内容，即在元素的样式中添加/删除display:none。

什么是结构指令？

结构指令负责HTML布局。他们的形状或   重塑DOM的结构，通常是通过添加，删除或   操纵元素。

在第一种情况下，如果表达式是false，那么div并且它的内容将无法创建。在第二种情况下div，如果表达式为false，则始终会创建内容，但它们不是可见。

Answer 2

它们之间实际上存在性能差异：

如果表达式为假，

ngIf 将注释掉数据。这样，数据甚至都无法加载，从而导致HTML加载速度更快。

[隐藏] 将加载数据并使用隐藏 HTML属性对其进行标记。即使不可见，也可以通过这种方式加载数据。

因此，当我们希望频繁更改显示/隐藏状态（例如在按钮单击事件上）时，最好使用 [隐藏] ，因此我们不必每次按钮都加载数据单击，只需更改其 hidden 属性即可。

请注意，对于较小的数据，只有较大的对象可能看不到性能差异。

Answer 3

* ngIf if false将从DOM中删除元素

如果为true，则隐藏将在css中将显示设置为无

Answer 4

当您尝试操作包含在一个节中的结构中的元素时，它们之间实际上还有另一个区别：

ngIf 如果在false时尝试引用该部分中的元素，则会在代码中导致未定义的错误。

如果在隐藏该节的情况下尝试引用该节中的元素，则

[隐藏] 不会在代码中引起未定义的错误。

因此，当我们要对包装部分中的元素进行操作时，最好使用[隐藏]。

Answer 5

另外一个关键点，它可能会破坏 *ngIf 块内的 mat-paginator。例如

.HTML

<div *ngIf="myCondition">
    <mat-paginator #seeMe ...></mat-paginator>
</div>

.TS

this.dataSource.paginator = this.seeMe;  // seeMe becomes underfined

<块引用>

解决方案：

答案 5 :(得分：0)

*如果分别设置为true和false，则ngIf将包含并删除DOM中的元素。 angular2中的[hidden]相当于我们在AngularJS中使用的ngshow和nghide。它只是通过添加display：none和display：block来显示和隐藏元素。

答案 6 :(得分：-1)

场景：->假设您正在使用Behaviorsubject，并且它会发出布尔值“ true / false”。

案例1 -> * ng如果->如果Behaviorsubject返回初始值false，则该DOM将消失。即使以后发出真实值，也不会显示。

案例2 ->隐藏->它将根据Behaviorsubject的发出值完美运行。即它将切换DOM。

注意-* ngIf还会切换DOM，但在用户操作或DOM事件上会切换ngIf的值。

Answer 6

*如果分别设置为true和false，则ngIf将包含并删除DOM中的元素。 angular2中的[hidden]相当于我们在AngularJS中使用的ngshow和nghide。它只是通过添加display：none和display：block来显示和隐藏元素。

Answer 7

场景：->假设您正在使用Behaviorsubject，并且它会发出布尔值“ true / false”。

案例1 -> * ng如果->如果Behaviorsubject返回初始值false，则该DOM将消失。即使以后发出真实值，也不会显示。

案例2 ->隐藏->它将根据Behaviorsubject的发出值完美运行。即它将切换DOM。

注意-* ngIf还会切换DOM，但在用户操作或DOM事件上会切换ngIf的值。