这对我来说很管用:

<div [style.visibility]="showThis ? 'visible' : 'hidden'">blah</div>

对于其他无意中遇到这个问题的人来说，这就是我如何做到的。

import {Directive, ElementRef, Input, OnChanges, Renderer2} from "@angular/core";

@Directive({
  selector: '[hide]'
})
export class HideDirective implements OnChanges {
  @Input() hide: boolean;

  constructor(private renderer: Renderer2, private elRef: ElementRef) {}

  ngOnChanges() {
    if (this.hide) {
      this.renderer.setStyle(this.elRef.nativeElement, 'visibility', 'hidden');
    } else {
      this.renderer.setStyle(this.elRef.nativeElement, 'visibility', 'visible');
    }
  }
}

我使用“可见性”是因为我想保留元素所占据的空间。如果你不希望这样做，你可以使用'display'并将其设置为'none';

你可以将它绑定到你的html元素，动态的或者非动态的。

<span hide="true"></span>

or

<span [hide]="anyBooleanExpression"></span>

隐藏属性可以用于此

[hidden]="!myVar"

另请参阅

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

问题

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

看看Plunker例子中的一些没有被隐藏，因为它有一个样式

: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仍然包含它。

在Angular文档https://angular.io/guide/structural-directives#why-remove-rather-than-hide上有两个例子

指令可以通过将其显示样式设置为none来隐藏不需要的段落。

<p [style.display]="'block'">
  Expression sets display to "block".
  This paragraph is visible.
</p>

<p [style.display]="'none'">
  Expression sets display to "none".
  This paragraph is hidden but still in the DOM.
</p>

你可以使用[style。display]="'block'"来替换ngShow和[style.]display]="'none'"替换ngHide。

处理这个问题的最好方法是使用ngIf 因为这会阻止元素在前端渲染，

如果你使用[hidden]="true"或style hide [style. "它将只隐藏在前端的元素，并且人们可以更改它的值并轻松查看它， 在我看来，最好的隐藏元素的方法是ngIf

<div *ngIf="myVar">stuff</div>

如果你有多个元素(需要实现else also)，你可以使用<ng-template>选项

<ng-container *ngIf="myVar; then loadAdmin else loadMenu"></ng-container>
<ng-template #loadMenu>
     <div>loadMenu</div>
</ng-template>

<ng-template #loadAdmin>
     <div>loadAdmin</div>
</ng-template>  

ng模板示例代码

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