<div [hidden]="myExpression">

myExpression可以设置为true或false

使用hidden，就像你用控件绑定任何模型一样，并为它指定css:

HTML:

<input type="button" class="view form-control" value="View" [hidden]="true" />

CSS:

[hidden] {
   display: none;
}

根据ngShow和ngHide的Angular 1文档，这两个指令都会根据指令的条件为元素添加css样式display: none !important;(对于ngShow，为false值添加css，而对于ngHide，为true值添加css)。

我们可以使用Angular 2的ngClass指令来实现这个行为:

/* style.css */
.hide 
{
    display: none !important;
}

<!-- old angular1 ngShow -->
<div ng-show="ngShowVal"> I'm Angular1 ngShow... </div>

<!-- become new angular2 ngClass -->
<div [ngClass]="{ 'hide': !ngShowVal }"> I'm Angular2 ngShow... </div>

<!-- old angular1 ngHide -->
<div ng-hide="ngHideVal"> I'm Angular1 ngHide... </div>

<!-- become new angular2 ngClass -->
<div [ngClass]="{ 'hide': ngHideVal }"> I'm Angular2 ngHide... </div>

注意，对于Angular2中的show行为，我们需要添加!(不是)在ngShowVal之前，对于Angular2中的hide行为，我们不需要添加!(不是)在ngHideVal之前。

这个答案是为那些不知道如何隐藏一个元素，从.ts文件可见

TS文件

实现OnInit { isHidden:boolean = false; 隐藏(){ 这一点。isHidden = true; ｝ 取消隐藏(){ 这一点。isHidden = false; ｝ ｝

HTML文件

< div[隐藏]=“isHidden >的< / div > <巴顿(click) =“hide ()“巴顿>隐藏< / > <巴顿(click) =“unHide ()“巴顿> UnHide < - >

抱歉，我不同意将绑定为hidden，因为在使用Angular 2时，它被认为是不安全的。这是因为隐藏样式可以很容易地覆盖，例如使用

display: flex;

建议使用*ngIf，这样更安全。更多细节，请参考Angular官方博客。使用Angular 2要避免的5个新手错误

<div *ngIf="showGreeting">
   Hello, there!
</div>

[隐藏]= " yourVariable " 或 [style.display] = " ! isShow ?'block': 'none'"