<div [hidden]="flagValue">
---content---
</div>

你有两个选择:

第一个选项

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

第二个选项

myvariable可以是布尔值

[hidden]="!myVarible"

使用[ngStyle]

[ngStyle]="{'visibility': my-flag ? 'visible' : 'hidden'}"

如果你的情况是样式为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";
}

使用[hidden]属性:

[hidden]="!myVar"

或者你可以使用*ngIf

*ngIf="myVar"

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

对我来说，[隐藏]=!瓦尔从来没有成功过。

因此，<div *ngIf="expression" style="display:none;" >

<div *ngIf="expression">总是给出正确的结果。