如何在AngularJS中通过点击按钮隐藏一个HTML元素

在这篇文章中，我们将看到如何在Angular中使用切换按钮功能，通过点击按钮隐藏和显示一个元素。切换按钮是一个用户界面控件，当用户想在两种状态或条件之间切换时，它可能很有用。例如，在我们的智能手机中，我们通常会关闭/打开无线连接设备的按钮，如蓝牙、Wifi、飞行模式等。这种切换按钮使日常生活中的东西更容易使用。本文将展示如何使用Angular JS制作一个切换数据的按钮。

ngif指令 : ngIf是一个Angular结构指令，根据表达式的评估值创建一个模板。表达式的值应该始终是True或False。当模板内的表达式评估为真时，那么then块内的代码块就会被渲染，而当表达式评估为假时，else块就会被渲染，它是可选的。
语法:

<div *ngIf = "condition">Content to render when condition is true.</div>

对于app.component.html文件，我们将使用这个toggleData()函数来调用Html中的函数。

<button (click)="toggleData()">Toggle Data</button>

对于app.component.ts文件，我们定义了一个函数来切换按钮，以显示或隐藏内容。

export class AppComponent {
 toDisplay = true;

 toggleData() {
   this.toDisplay = !this.toDisplay;
 }
}

步骤:

• 首先，将内容包在一个

<

div>在Html文件中的标签。
* 现在取一个变量 “toDisplay “并将其绑定到

<

div>标签。
* 在一个HTML文件中，包括一个按钮，并在用户点击它的时候附加一个函数调用。
* 在ts文件中，实现该函数，现在将toDisplay变量在真和假之间切换。
* 上述实施完成后，启动应用程序

项目结构：这将看起来像下面的图片

示例:

<div *ngIf="toDisplay">
  <p>Click the below button to display and hide the data</p>
</div>
<button (click)="toggleData()">Toggle Data</button>

import { Component } from "@angular/core";
  
@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
})
export class AppComponent {
  toDisplay = true;
  
  toggleData() {
    this.toDisplay = !this.toDisplay;
  }
}

输出：从上面的输出中，我们可以看到通过点击 “切换数据 “按钮，我们可以显示或隐藏这些数据。