Angular2：条件显示，绑定到[hidden]属性与* ngIf指令

Question

在Angular2中，我们想要有条件地显示<output> Table </output> 块。以下两种方式之间的区别是什么。

1. <div>其中<div [hidden]=isLoaded>Hello World!</div>是对应isLoaded文件中的布尔值。

2. .ts

我知道，即使页面中未显示<div *ngIf=isLoaded>Hello World!</div>，1。在DOM中仍然有<div>，而2.不会。还有其他差异吗？什么是他们每个人的利弊？

Answer 1

区别在于*ngIf会从DOM中删除元素，而[hidden]实际上会通过设置display:none来使用CSS样式。但是，[hidden]的问题在于它可能会覆盖，因此会显示div，就像您的情况一样，并且您会为此感到不知所措。

总结一下，*ngIf和[hidden] 不完全相同。前者从DOM中删除元素，而后者则切换display CSS属性。