[hidden]="!myVar"

也可以看看

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

问题

hidden有一些问题，因为它可能与CSS显示属性冲突。

看看在Plunker example有些没有隐藏，因为它有一种风格

: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或删除属性将实际使元素
可见。

使用{{}}也会将表达式转换为字符串，并且无法正常工作。

只有使用[]绑定才能正常工作，因为此false被赋值为false，而不是“false”。

* ngIf vs [hidden]

* ngIf有效地从DOM中删除其内容，而[隐藏]修改显示属性，并仅指示浏览器不显示内容，但DOM仍包含它。