* ngIf和[hidden]有什么区别? [英] What is the difference between *ngIf and [hidden]?

问题描述

说我对照和表达式进行检查，那么这两个不是吗?

Say I check it against and expression, then aren't these two same ?

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

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

推荐答案

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

There is actually a performance difference between them:

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

ngIf will comment out the data if the expression is false. This way the data are not even loaded, causing HTML to load faster.

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

[hidden] will load the data and mark them with the hidden HTML attribute. This way data are loaded even if they are not visible.

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

So [hidden] is better used when we want the show/hide status to change frequently, for example on a button click event, so we do not have to load the data every time the button is clicked, just changing its hidden attribute would be enough.

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

Note that the performance difference may not be visible with small data, only with larger objects.

这篇关于* ngIf和[hidden]有什么区别?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！