在 Angular 中隐藏和显示 div

【问题标题】：Hide and show div in Angular在 Angular 中隐藏和显示 div
【发布时间】：2021-03-24 03:49:04
【问题描述】：

我想在单击按钮时显示一个隐藏的 div。我正在使用 Angular7 我尝试了一些方法，但没有奏效。请帮我。谢谢

【问题讨论】：

【解决方案1】：

你可以使用 *ngIf

模板：

<div *ngIf="display">Test Data</div>
<input type="button" value="click" (click)="update"/>

组件：

display = true;
update(){
   this.display = !this.display;
}

【讨论】：

【解决方案2】：

您可以将 *ngIf 指令链接到您的组件，并将变量设置为 True，然后在按钮上点击修改变量为false。

模板：

<div *ngIf='variable'></div>
<button (click)='showContent()'></button>

组件：

  variable = true;
  showContent() {
  this.variable = false;
}

【讨论】：

【解决方案3】：

根据您的需要更改显示或可见性。

使用 ngStyle 或 ngClass 根据条件进行设置

【讨论】：