使用 ngIf else 在 Angular 中控制数据的显示

在 Angular 中，ngIf 指令用于根据给定的表达式决定元素是否要显示出来。但是，有时候我们希望在条件不满足的情况下显示另一个元素（或组件）。这时候就可以使用 ngIf else。

ngIf else 的基本用法

ngIf else 的基本语法如下所示：

<div *ngIf="condition; else elseBlock">Some content...</div>
<ng-template #elseBlock>Alternate text...</ng-template>

其中，*ngIf="condition" 用于判断元素是否需要显示出来，else elseBlock 则是告诉 Angular 在条件不满足的情况下显示哪个元素（这里是标记为 elseBlock 的模板）。模板要使用 ng-template 来定义。

在实际场景中，可以根据具体的业务需求来决定 condition 的值，例如：

<div *ngIf="isLoggedIn; else loginBlock">Welcome back!</div>
<ng-template #loginBlock>Please log in to continue...</ng-template>

在上面的代码中，isLoggedIn 可以是一个 boolean 类型的变量，表示用户是否已经登录。

更多 ngIf else 的用法

ngIf else 还有一些高级用法，下面列举几个常见的例子。

双重条件判断

有时候我们需要根据多个条件来决定元素的显示方式。这时候可以使用逻辑运算符（例如 && 和 ||）来组合多个条件表达式，例如：

<div *ngIf="isVIP && hasOrders; else noDataBlock">
  Your VIP order history...
</div>
<ng-template #noDataBlock>
  No order history found.
</ng-template>

在上面的代码中，只有用户是 VIP 并且有订单记录时才显示订单列表。否则显示 “No order history found.” 的提示信息。

多个 ngIf else

有时候我们需要在一个元素上同时使用多个 ngIf else，例如：

<div *ngIf="condition1; then thenBlock else (condition2 ? elseBlock1 : elseBlock2)">
  Some content...
</div>
<ng-template #thenBlock>Condition 1 is true.</ng-template>
<ng-template #elseBlock1>Condition 1 is false, and condition 2 is true.</ng-template>
<ng-template #elseBlock2>Both condition 1 and condition 2 are false.</ng-template>

在上面的代码中，当 condition1 为 true 时显示 thenBlock，当 condition1 为 false 但 condition2 为 true 时显示 elseBlock1，否则显示 elseBlock2。

自定义 ngIf else 的样式

有时候我们希望在使用 ngIf else 的时候能够自定义样式。这时候可以通过 CSS 来实现。例如：

<div *ngIf="condition; else elseBlock" class="my-custom-class">Some content...</div>
<ng-template #elseBlock>
  <div class="my-custom-class">
    Alternate text...
  </div>
</ng-template>

在上面的代码中，我们在元素上添加了 my-custom-class 样式类，然后在 elseBlock 中也添加了相同的样式类，这样就能够保证两个元素的样式一致。

总结

ngIf else 是一个非常实用的指令，可以帮助我们根据条件来选择不同的元素或组件进行显示。除了上面提到的语法之外，还有很多变形用法，希望本文能为读者在实际应用中提供帮助。