使用 *ngIf else 指令展示条件性内容

在Angular中，我们经常需要根据某些条件来显示或隐藏HTML元素。使用*ngIf else指令可以帮助我们轻松地实现这一点。

基本使用方法

*ngIf else指令的基本语法如下：

<div *ngIf="condition; else elseBlock">
  Content to show when condition is true.
</div>
<ng-template #elseBlock>
  Content to show when condition is false.
</ng-template>

如果条件(condition)为true，则显示“Content to show when condition is true.”。然而当条件不满足时，则显示“Content to show when condition is false.”。

举个例子

下面是一个例子，它演示了如何使用*ngIf else指令：

<button (click)="isShown = !isShown">Toggle content</button>
<div *ngIf="isShown; else notShown">I'm visible!</div>
<ng-template #notShown><div>I'm not visible!</div></ng-template>

在上面的代码中，我们通过绑定click事件来控制isShown变量的值。当isShown的值为true时，将显示"I'm visible!"，否则将显示"I'm not visible!"。

显示多个元素

如果有多个元素需要根据条件显示或隐藏，则可以使用*ngIf else指令来实现。例如：

<div *ngIf="isAdmin; else notAdmin">
  <div>Welcome, admin!</div>
  <button (click)="logout()">Logout</button>
</div>
<ng-template #notAdmin><div>You're not authorized!</div></ng-template>

在上面的代码中，我们使用*ngIf else指令来判断当前用户是否为管理员。如果是管理员，则显示欢迎消息和一个"Logout"按钮，否则显示"You're not authorized!"。

同时使用多个else块

有时候，我们需要根据多个条件来显示不同的内容。在这种情况下，我们可以使用多个else块来实现。例如：

<div *ngIf="level === 'beginner'; then beginnerBlock else advancedBlock"></div>
<ng-template #beginnerBlock><div>Welcome, beginner!</div></ng-template>
<ng-template #advancedBlock><div>Welcome, advanced user!</div></ng-template>

在上面的代码中，我们使用*ngIf else指令来判断用户的等级。如果用户的等级是"beginner"，则显示欢迎消息"Welcome, beginner!"，否则显示消息"Welcome, advanced user!"。

总结

ngIf else指令是Angular中非常有用的一个指令。它可以帮助我们轻松地根据某些条件来显示或隐藏HTML元素。通过本文的介绍，相信大家已经掌握了ngIf else指令的基本用法。