说我检查它和表达,那么这两个不一样吗？
<div *ngIf="expression">{{val}}</div>
<div [hidden]="!expression">{{val}}</div>
Rom*_*n C 24
ngIf是一个结构指令,它创建/销毁DOM内的内容.第二个语句隐藏/显示带有css的内容,即添加/删除display:none元素的样式.
什么是结构指令？
结构指令负责HTML布局.它们通常通过添加,移除或操纵元素来塑造或重塑DOM的结构.
在第一种情况下,如果表达式是,false那么div它的内容将不会被创建.在第二种情况下div,始终创建内容,但如果表达式是,则它们不可见false.
小智 23
它们之间实际上存在性能差异:
如果表达式为false,ngIf将注释掉数据.这样,数据甚至无法加载,从而导致HTML加载速度更快.
[hidden]将加载数据并使用隐藏的 HTML属性标记它们.这样即使数据不可见,也会加载数据.
因此,当我们希望显示/隐藏状态经常更改时,[隐藏]更好用,例如在按钮单击事件上,因此我们不必在每次单击按钮时加载数据,只需更改其隐藏属性即可足够.
请注意,对于较小的数据,性能差异可能不明显,仅对较大的对象可见.
当您尝试操作包含在一个节中的结构中的元素时，它们之间实际上还有另一个区别：
如果在false时尝试引用该部分中的元素，则ngIf将在代码中导致未定义的错误。
如果在隐藏该节的情况下尝试引用该节中的元素，则[hidden]不会在代码中引起未定义的错误。
因此，当我们要对包装部分中的元素进行操作时，最好使用[hidden]。
| 归档时间： |
|
| 查看次数： |
27260 次 |
| 最近记录： |