该hidden属性可用于

[hidden]="!myVar"

也可以看看

• https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden

问题

hidden但是有一些问题，因为它可能与display属性的 CSS 冲突。

看看some在 Plunker
示例 中如何不被隐藏，因为它有一个样式

:host {display: block;}

放。（这可能在其他浏览器中表现不同 - 我用 Chrome 50 测试过）

解决方法

您可以通过添加来修复它

[hidden] { display: none !important;}

中的全局样式index.html。

另一个陷阱

hidden="false"
hidden="{{false}}"
hidden="{{isHidden}}" // isHidden = false;

是一样的

hidden="true"

并且不会显示元素。

hidden="false"将分配"false"被认为是真实的字符串。
只有值false或删除属性才会真正使元素可见。

Using{{}}还将表达式转换为字符串，并且不会按预期工作。

只有绑定 with[]才能按预期工作，因为 thisfalse被分配为false而不是"false".

*ngIf 对比[hidden]

*ngIf``[hidden]在修改属性时有效地从 DOM 中删除其内容，display并且仅指示浏览器不显示内容，但 DOM 仍然包含它。