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

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

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

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

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

根据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之前。

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

HTML:

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

CSS:

[hidden] {
   display: none;
}

这对我来说很管用:

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