要隐藏和显示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+的方法

使用[ngStyle]

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

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

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

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

你有两个选择:

第一个选项

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

第二个选项

myvariable可以是布尔值

[hidden]="!myVarible"