要隐藏和显示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]="myExpression">

myExpression可以设置为true或false

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

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

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

<div [ngClass]="{'d-none': exp}"> </div>

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

我发现自己处于相同的情况，与我的情况不同，元素是一个伸缩容器。如果不是你的情况，一个简单的工作可以

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

在我的例子中，由于我们支持的许多浏览器仍然需要供应商前缀来避免问题，我选择了另一种简单的解决方案

[class.is-loading]="isLoading"

哪里的CSS是简单的

&.is-loading { display: none } 

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