如果你的情况是样式为display none，你也可以使用ngStyle指令直接修改显示，我这样做是为了一个引导下拉列表，它的UL被设置为display none。

因此，我创建了一个单击事件，用于“手动”切换UL显示

<div class="dropdown">
    <button class="btn btn-default" (click)="manualtoggle()"  id="dropdownMenu1" >
    Seleccione una Ubicación
    <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" [ngStyle]="{display:displayddl}">
        <li *ngFor="let object of Array" (click)="selectLocation(location)">{{object.Value}}</li>                                
     </ul>
 </div>    

然后在组件上，我有每次切换的showDropDown:bool属性，并基于int设置样式的displayDDL，如下所示

showDropDown:boolean;
displayddl:string;
manualtoggle(){
    this.showDropDown = !this.showDropDown;
    this.displayddl = this.showDropDown ? "inline" : "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之前。

我发现自己处于相同的情况，与我的情况不同，元素是一个伸缩容器。如果不是你的情况，一个简单的工作可以

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

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

[class.is-loading]="isLoading"

哪里的CSS是简单的

&.is-loading { display: none } 

将显示的状态留给默认类处理。

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

display: flex;

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

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

<div [hidden]="myExpression">

myExpression可以设置为true或false

你有两个选择:

第一个选项

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

第二个选项

myvariable可以是布尔值

[hidden]="!myVarible"