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

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

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

HTML:

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

CSS:

[hidden] {
   display: none;
}

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

如果你只是想使用AngularJS提供的对称的隐藏/显示指令，我建议写一个属性指令来简化模板(用Angular 7测试):

import { Directive, Input, HostBinding } from '@angular/core';

@Directive({ selector: '[shown]' })
export class ShownDirective {
  @Input() public shown: boolean;

  @HostBinding('attr.hidden')
  public get attrHidden(): string | null {
    return this.shown ? null : 'hidden';
  }
}

其他许多解决方案都是正确的。你应该尽可能使用*ngIf。使用hidden属性可能会应用意想不到的样式，但除非您正在为其他人编写组件，否则您可能知道它是否是。因此，为了让这个显示的指令工作，你还需要确保你添加:

[hidden]: {
  display: none !important;
}

到你的全球风格某处。

你可以像这样使用指令:

<div [shown]="myVar">stuff</div>

用这样对称的(和相反的)版本:

<div [hidden]="myVar">stuff</div>

在should - yous should后面加一个前缀，比如so [acmeshowwn]和just [shows]。

我使用显示属性指令的主要原因是为了将AngularJS代码转换为Angular - and——当被隐藏的内容包含导致XHR往返的容器组件时。我不直接用[hidden]="!myVar”是经常足够复杂，像:[hidden]="!(myVar || yourVar) && anotherVar”-是的，我可以反转，但它更容易出错。(如图所示)更容易思考。

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

TS文件

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

HTML文件

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