在 Angular 中显示和隐藏

Rana Hasnain Khan 2024年2月15日
在 Angular 中显示和隐藏

我们将介绍在 Angular 中显示和隐藏组件或元素的示例。

在 Angular 中显示和隐藏

在开发商业应用程序时,我们需要根据用户角色或条件隐藏一些数据。我们必须根据该应用程序中的条件显示相同的数据。

在本教程中,我将向你展示一种简单的方法,使用它我们可以根据条件显示和隐藏数据。

让我们使用以下命令创建一个新应用程序。

# angular
ng new my-app

在 Angular 中创建我们的新应用程序后,我们将使用此命令转到我们的应用程序目录。

# angular
cd my-app

现在,让我们运行我们的应用程序来检查所有依赖项是否安装正确。

# angular
ng serve --open

假设我们有一个模板或一段代码,我们只想在条件为真时显示,在条件为假时隐藏它。我们可以使用此示例显示和隐藏它。

首先,我们将在 app.component.html 中创建一个包含标题、段落和输入字段的演示内容,并将其包装在 div 中。

# Angular
<div>
  <hello name="{{ name }}"></hello>
  <p>Enter your name:</p>
  <input type="text" id="element"/>
</div>

现在,在 app.component.ts 中,我们创建一个新变量 element 并将其设置为 false

# Angular
element = false;

我们将根据条件使用*ngIf 显示和隐藏我们的 div

# Angular
<div *ngIf="element == true">
  <hello name="{{ name }}"></hello>
  <p>Enter your name:</p>
  <input type="text" id="element"/>
</div>

如上例所示,我们设置了一个条件,如果 elementtrue,则显示 div,如果条件为 false,则不显示。

因此,div 将被隐藏,因为我们已将 element 设置为 false。现在,让我们将 element 的值更改为 true 并检查它是如何工作的。

输出:

在 Angular 结果中显示 div

你现在可以看到,当我们更改 element 的值时,我们在 div 上设置的条件发生了变化,它开始显示 div 及其内部的所有元素。

想象一下,如果我们想在单击某些按钮时显示和隐藏数据。我们可以使用相同的 *ngIf 创建这个简单的示例。

现在,让我们创建两个具有两个函数 showData()hideData() 的按钮。我们需要在 div 之外创建这两个按钮,这样当条件更改为 false 时它们不会被隐藏。

因此,我们在 app.component.html 中的代码将如下所示。

# Angular
<div *ngIf="element == true">
  <hello name="{{ name }}"></hello>
  <p>Enter your name:</p>
  <input type="text" id="element" />
</div>
<button (click)="showData()">Display Data</button>
<button (click)="hideData()">Hide Data</button>

现在,让我们在 app.component.ts 中创建这两个函数。showData()element 的值更改为 truehideData()element 的值更改为 false

因此,代码将如下所示。

# Angular
showData() {
    return (this.element = true);
  }
  hideData() {
    return (this.element = false);
  }

我们现在将添加一些 CSS 代码以使我们的按钮看起来不错。

# Angular
button{
  margin-top: 10px;
  padding: 10px;
  background-color: aquamarine;
  border: none;
  margin-right: 10px;
}

让我们看看它是如何工作的。

输出:

在 Angular 中显示按钮点击结果的 div

在 angular 中点击按钮时显示和隐藏内容

正如你在上面的示例中所看到的,我们可以使用 *ngIf 和按钮 (click) 方法轻松隐藏和显示内容。

如果我们想在内容隐藏时隐藏 Display Data 按钮,在数据被隐藏时隐藏 Hide Data 按钮,我们也可以在按钮上使用相同的概念。

所以我们创建一个*ngIf 条件,如果 elementtrue,则仅显示隐藏数据按钮,当 elementfalse 时,将显示显示数据按钮。

# Angular
<div *ngIf="element == true">
  <hello name="{{ name }}"></hello>
  <p>Enter your name:</p>
  <input type="text" id="element" />
</div>
<button *ngIf="element == false" (click)="showData()">Display Data</button>
<button *ngIf="element == true" (click)="hideData()">Hide Data</button>

我们不需要在 app.component.ts 文件中编写任何代码行,因为我们创建的函数和 *ngIf 函数将帮助我们在按钮上完成相同的操作。所以,让我们检查一下它现在是如何工作的结果。

输出:

以 Angular 显示和隐藏按钮点击的内容和按钮

所以,在本教程中,我们学习了如何使用*ngIf 根据条件隐藏和显示内容,还学习了如何使用按钮的 (click) 方法来帮助我们隐藏和显示按钮上的数据点击。

Rana Hasnain Khan avatar Rana Hasnain Khan avatar

Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.

LinkedIn