如何使用* ng
Answers:
角度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>根据MDN实现的标签实现：
HTML
<template>元素是一种用于保存客户端内容的机制，该内容在页面加载时不会呈现，但随后可以在运行时使用JavaScript实例化。
我希望有一种方法可以仅使用<ng-template>而不使用诸如div之类的其他标签，但是奇怪的是它不是...我知道<div>在您使用它时会被删除，但是我认为这有点奇怪。
—
安德烈亚斯（Andreas）
@andreas您可以使用
—
Martin Schneider
<ng-container>if子句
注意：您可以
—
Simon_Weaver
ng-container将容器用于包含* ngIf的容器，但不能用于模板
@Simon_Weaver我想通了。但为什么？他们为什么不允许
—
伊兰·麦丹
*ngIf 继续工作ng-template？
<div * ngIf =“ isValid;然后忽略其他内容other_content”>此处被忽略</ div>，不会被忽略。它是放置ng模板的地方
—
dimson d 18-4-25
在Angular 4.xx中， 您可以通过四种方式使用ngIf来实现简单的if else过程：
只是使用如果
<div *ngIf="isValid"> If isValid is true </div>在其他情况下使用If（请注意templateName）
<div *ngIf="isValid; else templateName"> If isValid is true </div> <ng-template #templateName> If isValid is false </ng-template>将If与Then一起使用（请注意templateName）
<div *ngIf="isValid; then templateName"> Here is never showing </div> <ng-template #templateName> If isValid is true </ng-template>将If与Then和Else一起使用
<div *ngIf="isValid; then thenTemplateName else elseTemplateName"> Here is never showing </div> <ng-template #thenTemplateName> If isValid is true </ng-template> <ng-template #elseTemplateName> If isValid is false </ng-template>
提示：ngIf会对表达式求值，然后 在表达式分别为真或假时分别渲染then或else模板。通常是：
- 那么除非绑定到其他值，否则template是ngIf的内联模板。
- 否则，除非绑定模板，否则模板为空白。
似乎编译器不接受
—
slartidan
...; else ...。可能;应该删除。
在angular-6中，我进行了测试
—
WasiF
...; else ...并成功运行
“ 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>
这行不通。如果正确，那么它仍然不会添加任何值，因为接受的答案已经显示了操作方法。
—
君特Zöchbauer
您可以使用<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 Live演示
希望这会有所帮助... !!!
带有示例的源链接
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和其他
<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>
这仅是重复已经接受的答案的内容
—
phil294
ngIf / Else的语法
<div *ngIf=”condition; else elseBlock”>Truthy condition</div>
<ng-template #elseBlock>Falsy condition</ng-template>
使用NgIf / Else / Then显式语法
要添加然后模板，我们只需要将其显式绑定到模板即可。
<div *ngIf=”condition; then thenBlock else elseBlock”> ... </div>
<ng-template #thenBlock>Then template</ng-template>
<ng-template #elseBlock>Else template</ng-template>
NgIf和异步管道的可观察对象
只需从Angular 8中添加新更新即可。
- 对于else的情况，我们可以使用ngIf和ngIfElse。
<ng-template [ngIf]="condition" [ngIfElse]="elseBlock">
Content to render when condition is true.
</ng-template>
<ng-template #elseBlock>
Content to render when condition is false.
</ng-template>- 对于then的情况，我们可以使用ngIf和ngIfThen。
<ng-template [ngIf]="condition" [ngIfThen]="thenBlock">
This content is never showing
</ng-template>
<ng-template #thenBlock>
Content to render when condition is true.
</ng-template>- 对于then和else的情况，我们可以使用ngIf，ngIfThen和ngIfElse。
<ng-template [ngIf]="condition" [ngIfThen]="thenBlock" [ngIfElse]="elseBlock">
This content is never showing
</ng-template>
<ng-template #thenBlock>
Content to render when condition is true.
</ng-template>
<ng-template #elseBlock>
Content to render when condition is false.
</ng-template>
大！我们最近移至8
—
号角
ngif表达式的结果值不只是布尔值true或false
如果表达式只是一个对象，它仍然将其评估为真实性。
如果对象未定义或不存在，则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标签或模板有条件，则可以使用两种可能性：
- HTML标记上的* ngIf来自CommonModule的指令；
- 如果别的
<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
资料来源：
您还可以使用Javascript短三元条件运算符吗？像这样的角度
{{doThis() ? 'foo' : 'bar'}}
要么
<div [ngClass]="doThis() ? 'foo' : 'bar'">