可以使用 hidden 属性来实现这一点

[hidden]="!myVar"

另请参阅

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

问题

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

在 Plunker 示例 中查看 some 不会被隐藏，因为它具有样式

: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 与 [hidden]

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

使用 [hidden] 属性：

[hidden]="!myVar"

或者您可以使用 *ngIf

*ngIf="myVar"

这是显示/隐藏元素的两种方法。唯一的区别是： *ngIf 从 DOM 中移除元素，而 [hidden] 告诉浏览器使用 CSS display 属性通过将元素保留在 DOM 中来显示/隐藏元素。

我发现自己处于同样的情况，不同之处在于我的情况是元素是一个弹性容器。如果不是你的情况，一个简单的解决方法可能是

[style.display]="!isLoading ? 'block' : 'none'"

在我的情况下，由于我们支持的许多浏览器仍然需要供应商前缀来避免问题，我选择了另一个简单的解决方案

[class.is-loading]="isLoading"

其中 CSS 很简单

&.is-loading { display: none } 

然后由默认类处理显示状态。