迹忆客 专注技术分享

当我们作为开发人员构建 Web 应用程序时，我们需要设置 Web 应用程序以动态调整页面； *ngIf 语句变得很方便。 *ngIf 用于操作呈现在页面上的 HTTP 元素。

它在我们告诉网络应用程序在一些参数到位后执行某个功能的条件下工作。而当这些参数没有到位时，它应该执行另一种代替。

我们将只使用*ngIf 来执行一些功能。然后我们将把 *ngIf 与 else 语句结合起来，看看有什么可能。最后，我们将使用 *ngIf else then 组合来操作 HTTP 元素。

在 Angular 中使用*ngIf 作为一个独立的函数

所以在这里，我们将使用*ngIf 语句以及 true 或 false 条件。

我们将在 app.component.html 中完成所有工作。

<h1>*ngIf in Angular</h1>
<h2 *ngIf="true">
  Hi, Youtube
</h2>

当*ngIf 条件设置为真时，网页显示 Hi, Youtube。一旦更改为 false，Hi, Youtube 将从网页中消失。

我们也可以像这样通过 app.component.ts 传递函数：

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  title = "CodeSandbox";
  displayMe=true;
}

然后我们将*ngIf 值更改为 displayMe，如下所示：

<h1>*ngIf in ANgular</h1>
<h2 *ngIf="displayMe">
  Hi, Youtube
</h2>

就像第一个示例一样，基本规则的工作方式相同。

将 *ngIf 与 else 一起使用

当 *ngIf 条件与 else 语句结合使用时，它可以帮助我们决定在任何时间点我们希望在网页上显示什么内容。

这种方法要求我们在 ng-template 标签内嵌套我们想要出现在 Hi, Youtube 中的另一个语句。

app.component.html 将如下所示：

<h1>*ngIf in ANgular</h1>
<h2 *ngIf="displayMe else elseBlock">
  Hi, Youtube
</h2>
<ng-template #elseBlock>
<h2>
    Hi, Twitter
    </h2>
</ng-template>

你会注意到我们在*ngIf 条件旁边使用了 else 语句，这使我们能够更好地控制网页的内容。

所以在 app.component.ts 中，当 displayMe 为真值时，Hi, Youtube 将显示。如果它是假的，嗨，Twitter 将显示。

在 Angular 中使用 *ngIf 与 else 和 then 语句

在前面的示例中，我们被介绍了 ng-template，它与 else 语句一起使用。当与 *ngIf 和 else 一起使用时，then 语句允许在 ng-template 中操作内容。

对于想要保持结构化且排列良好的代码文件的编码人员来说，这是一个受欢迎的解决方案。

我们的 app.component.html 将被配置为：

<h1>*ngIf in ANgular</h1>
<h2 *ngIf="displayMe; then ifBlock else elseBlock">
  Hi, Youtube
</h2>
<ng-template #ifBlock>
<h2>
    Hi, Google
    </h2>
</ng-template>
<ng-template #elseBlock>
<h2>
    Hi, Twitter
    </h2>
</ng-template>

所以在 app.component.ts 中，当 displayMe 为真值时，会显示 Hi, Google，当它是假值时，会显示 Hi, Twitter。