隐藏属性可以用于此

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

使用[hidden]属性:

[hidden]="!myVar"

或者你可以使用*ngIf

*ngIf="myVar"

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

如果你的情况是样式为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，就像你用控件绑定任何模型一样，并为它指定css:

HTML:

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

CSS:

[hidden] {
   display: none;
}

<div [hidden]="myExpression">

myExpression可以设置为true或false

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

display: flex;

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

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

根据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 } 

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

如果你正在使用Bootstrap是这样简单:

<div [class.hidden]="myBooleanValue"></div>

在引导4.0中，类"d-none" = "display: none!important;"

<div [ngClass]="{'d-none': exp}"> </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>

要隐藏和显示div在按钮上单击angular 6。

Html代码

<button (click)="toggleElement()">FormatCell</button>
<div class="ruleOptionsPanel" *ngIf="isShow">
   <table>
      <tr>
         <td>Name</td>
         <td>Ram</td>
      </tr>
   </table>
</div>

AppComponent。ts代码

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent{
   isShow=false;
   toggleElement():void
   {
      this.isShow = !this.isShow
   }
}

这适用于我，它是一种替代ng-hide和ng-show在angular2+的方法

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

在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。

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

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

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

处理这个问题的最好方法是使用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模板示例代码

如果你只是想使用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”-是的，我可以反转，但它更容易出错。(如图所示)更容易思考。

这对我来说很管用:

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

我的问题是显示/隐藏一个垫子的按钮点击使用 < ng-container * ngIf = " myvar# " >。表的“加载”非常慢，在2-3秒内有300条记录。

数据是使用ngOnInit()中的订阅来加载的，并且可以在模板中使用，但是随着行数的增加，模板中表的“加载”变得越来越慢。

我的解决方案是将*ngIf替换为:

< div[风格。显示]= " activeSelected吗?'block': 'none'">

． 现在，当单击按钮时，表立即加载。

你有两个选择:

第一个选项

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

第二个选项

myvariable可以是布尔值

[hidden]="!myVarible"

使用[ngStyle]

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

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

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

TS文件

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

HTML文件

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