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

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

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

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

<div [class.hidden]="myBooleanValue"></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。

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

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

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

[class.is-loading]="isLoading"

哪里的CSS是简单的

&.is-loading { display: none } 

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

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

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

HTML:

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

CSS:

[hidden] {
   display: none;
}