如何使用“*ngIf else”？
我正在使用 Angular，我想在此示例中使用 *ngIf else（自版本 4 起可用）：
<div *ngIf="isValid">
content here ...
</div>
<div *ngIf="!isValid">
other content here...
</div>
如何使用 ngIf else 实现相同的行为？
角度 4 和 5：
使用 else：
<div *ngIf="isValid;else other_content">
content here ...
</div>
<ng-template #other_content>other content here...</ng-template>
您还可以使用 then else：
<div *ngIf="isValid;then content else other_content">here is ignored</div>
<ng-template #content>content here...</ng-template>
<ng-template #other_content>other content here...</ng-template>
或单独的 then：
<div *ngIf="isValid;then content"></div>
<ng-template #content>content here...</ng-template>
演示：
细节：
<ng-template>：是 Angular 自己的 <template> 标签实现，即 according to MDN：
HTML 元素是一种用于保存客户端内容的机制，这些内容在页面加载时不会呈现，但随后可能会在运行时使用 JavaScript 进行实例化。
在 Angular 4.xx 中
您可以通过四种方式使用 ngIf 来实现一个简单的 if-else 过程：
只需使用 If
提示：ngIf 计算表达式，然后在表达式分别为真或假时将 then 或 else 模板呈现在其位置。通常：then 模板是 ngIf 的内联模板，除非绑定到不同的值。否则模板是空白的，除非它被绑定。
...; else ...。可能应该删除 ;。
...; else ... 进行了测试，它工作正常
对于 Angular 9/8
来源Link 示例
export class AppComponent {
isDone = true;
}
1) *ngIf
<div *ngIf="isDone">
It's Done!
</div>
<!-- Negation operator-->
<div *ngIf="!isDone">
It's Not Done!
</div>
2) *ngIf 和 Else
<ng-container *ngIf="isDone; else elseNotDone">
It's Done!
</ng-container>
<ng-template #elseNotDone>
It's Not Done!
</ng-template>
3) *ngIf, Then 和 Else
<ng-container *ngIf="isDone; then iAmDone; else iAmNotDone">
</ng-container>
<ng-template #iAmDone>
It's Done!
</ng-template>
<ng-template #iAmNotDone>
It's Not Done!
</ng-template>
要使用 observable，如果 observable 数组包含数据，我通常会这样做。
<div *ngIf="(observable$ | async) as listOfObject else emptyList">
<div >
....
</div>
</div>
<ng-template #emptyList>
<div >
...
</div>
</ng-template>
只需添加来自 Angular 8 的新更新。
对于 if 与 else 的情况，我们可以使用 ngIf 和 ngIfElse。
如果 isShow 为真，则执行第一行，否则执行第二行，因为 elseBlockShow 作为参考变量工作。
<div *ngIf="isShow; else elseBlockShow">
Text to show for If
</div>
<ng-template #elseBlockShow>
Text to show for else block
</ng-template>
这是 Angular 的 NgIf 和使用 else 语句的一些漂亮而干净的语法。简而言之，您将在一个元素上声明一个 ElementRef，然后在 else 块中引用它：
<div *ngIf="isLoggedIn; else loggedOut">
Welcome back, friend.
</div>
<ng-template #loggedOut>
Please friend, login.
</ng-template>
我从 NgIf, Else, Then 中提取了这个示例，我发现它的解释非常好。
它还演示了使用 <ng-template> 语法：
<ng-template [ngIf]="isLoggedIn" [ngIfElse]="loggedOut">
<div>
Welcome back, friend.
</div>
</ng-template>
<ng-template #loggedOut>
<div>
Please friend, login.
</div>
</ng-template>
如果这就是您所追求的，还可以使用 <ng-container>：
<ng-container
*ngIf="isLoggedIn; then loggedIn; else loggedOut">
</ng-container>
<ng-template #loggedIn>
<div>
Welcome back, friend.
</div>
</ng-template>
<ng-template #loggedOut>
<div>
Please friend, login.
</div>
</ng-template>
来源取自 here on Angular's NgIf and Else syntax。
您可以使用 <ng-container> 和 <ng-template> 来实现：
<ng-container *ngIf="isValid; then template1 else template2"></ng-container>
<ng-template #template1>
<div>Template 1 contains</div>
</ng-template>
<ng-template #template2>
<div>Template 2 contains </div>
</ng-template>
您可以在下面找到 StackBlitz 现场演示：
“bindEmail”将检查电子邮件是否可用。如果电子邮件确实存在，则会显示注销。否则会显示登录。
<li *ngIf="bindEmail;then logout else login"></li>
<ng-template #logout><li><a routerLink="/logout">Logout</a></li></ng-template>
<ng-template #login><li><a routerLink="/login">Login</a></li></ng-template>
一个 ngif 表达式的结果值不仅仅是布尔真或假。
如果表达式只是一个对象，它仍然将其评估为真实性。
如果对象未定义或不存在，则 ngif 会将其评估为虚假。
常见的用法是如果一个对象被加载，存在，则显示这个对象的内容，否则显示“正在加载.......”。
<div *ngIf="!object">
Still loading...........
</div>
<div *ngIf="object">
<!-- the content of this object -->
object.info, object.id, object.name ... etc.
</div>
另一个例子：
things = {
car: 'Honda',
shoes: 'Nike',
shirt: 'Tom Ford',
watch: 'Timex'
};
<div *ngIf="things.car; else noCar">
Nice car!
</div>
<ng-template #noCar>
Call a Uber.
</ng-template>
<!-- Nice car ! -->
另一个例子：
<div *ngIf="things.car; let car">
Nice {{ car }}!
</div>
<!-- Nice Honda! -->
在 HTML 标记或模板上使用 if 条件有两种可能性：
*ngIf 指令来自 CommonModule，在 HTML 标记上；如果别的
https://i.stack.imgur.com/IQIbb.png
ng-template
<ng-template [ngIf]="condition1" [ngIfElse]="template2">
...
</ng-template>
<ng-template #template2>
...
</ng-template>
ngIf/Else 的语法
<div *ngIf=”condition; else elseBlock”>Truthy condition</div>
<ng-template #elseBlock>Falsy condition</ng-template>
https://i.stack.imgur.com/GNGHv.png
使用 NgIf / Else/ Then 显式语法
要添加 then 模板，我们只需将其显式绑定到模板。
<div *ngIf=”condition; then thenBlock else elseBlock”> ... </div>
<ng-template #thenBlock>Then template</ng-template>
<ng-template #elseBlock>Else template</ng-template>
https://i.stack.imgur.com/fzLsc.png
使用 NgIf 和异步管道的 Observables
https://i.stack.imgur.com/8gODX.png
您还可以在 Angular 中使用 JavaScript 短三元条件运算符 ?，如下所示：
{{doThis() ? 'foo' : 'bar'}}
或者
<div [ngClass]="doThis() ? 'foo' : 'bar'">
在 Angular 4.0 中，if..else 语法与 Java 中的条件运算符非常相似。
在 Java 中，您使用 "condition?stmnt1:stmnt2"。
在 Angular 4.0 中，您使用 *ngIf="condition;then stmnt1 else stmnt2"。
<div *ngIf="show; else elseBlock">Text to show</div>
<ng-template #elseBlock>Alternate text while primary text is hidden</ng-template>
<div *ngIf="this.model.SerialNumber != '';then ConnectedContent else DisconnectedContent" class="data-font"> </div>
<ng-template #ConnectedContent class="data-font">Connected</ng-template>
<ng-template #DisconnectedContent class="data-font">Disconnected</ng-template>
在 Angular 4、5 和 6 中
我们可以简单地创建一个 模板引用变量 2 并将其链接到 *ngIf 指令中的 else 条件
可能的语法 1 是：
<!-- Only If condition -->
<div *ngIf="condition">...</div>
<!-- or -->
<ng-template [ngIf]="condition"><div>...</div></ng-template>
<!-- If and else conditions -->
<div *ngIf="condition; else elseBlock">...</div>
<!-- or -->
<ng-template #elseBlock>...</ng-template>
<!-- If-then-else -->
<div *ngIf="condition; then thenBlock else elseBlock"></div>
<ng-template #thenBlock>...</ng-template>
<ng-template #elseBlock>...</ng-template>
<!-- If and else conditions (storing condition value locally) -->
<div *ngIf="condition as value; else elseBlock">{{value}}</div>
<ng-template #elseBlock>...</ng-template>
演示： https://stackblitz.com/edit/angular-feumnt?embed=1&file=src/app/app.component.html
资料来源：
NgIf - 指令模板语法
**ngIf else**
我采用的方法是在组件中有两个标志，并为相应的两个标志设置两个 ngIf。
它很简单，并且与材料配合得很好，因为 ng-template 和材料不能很好地协同工作。
关注公众号
不定期副业成功案例分享
想领先一步获取最新的外包任务吗？
立即订阅
HuntsBot(狩猎机器人)，一站式外包任务、远程工作、产品创意分享与订阅平台，支持钉钉、飞书、企业微信、邮箱、Telegram机器人订阅。平台会以及时、稳定、可靠的技术把外包任务需求、远程工作机会、产品创意等推送给每一位订阅的用户。
<ng-container>用于 if 子句ng-container用于包含 *ngIf 的容器，但不能用于模板*ngIf在ng-template上工作？