问：

我正在使用 Angular，我想在此示例中使用（从版本 4 开始可用）：*ngIf else

<div *ngIf="isValid">
  content here ...
</div>

<div *ngIf="!isValid">
 other content here...
</div>

我怎样才能实现相同的行为？ngIf else

angular if 语句 angular-template

答：

1445赞 El houcine bougarfaoui 3/25/2017 #1

角度 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 自己实现的标签，根据 MDN：<template>

HTML 元素是一种用于保存客户端的机制加载页面时不会呈现但可能呈现的内容随后在运行时使用 JavaScript 进行实例化。<template>

11赞 andreas 3/31/2017

我希望有一种方法可以在没有 div 等其他标签的情况下使用 <ng-template>，但奇怪的是它不是......我知道 <div> 在您使用它时会被删除，但我认为它作为实现有点奇怪。

41赞 Martin Schneider 6/17/2017

@andreas 可用于 if 子句<ng-container>

4赞 Simon_Weaver 1/18/2018

注意：您可以用于包含 *ngIf 的容器，但不能用于模板ng-container

0赞 Eran Medan 3/15/2018

@Simon_Weaver我艰难地想通了。但是为什么？为什么他们不允许工作？*ngIf ng-template

2赞 dimson d 4/26/2018

<div *ngIf=“isValid;然后 content else other_content“>here is ignored</div> 它不会被忽略。它是注入ng模板的地方

4赞 Amit Gaikwad 4/11/2017 #2

在 Angular 4.0 中，语法与 Java 中的条件运算符非常相似。if..else

在 Java 中，您使用 ."condition?stmnt1:stmnt2"

在 Angular 4.0 中，您使用 .*ngIf="condition;then stmnt1 else stmnt2"

1赞 Peter 6/30/2017

当表达式时看起来像 Oracle 案例。:-)

5赞 mythz 6/30/2017

您指的是存在于大多数基于 C 的语言中的三元运算符，但这更接近 Kotlin 的 if 表达式。

0赞 Andre TOKAM 5/3/2023

条件？stmnt1：stmnt2，这不仅在 Java 中有效。所以它不仅与java有关

9赞 Prashant Shrivastava 7/23/2017 #3

“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>

3赞 Günter Zöchbauer 7/23/2017

这是行不通的。如果它是正确的，那么它仍然不会增加任何价值，因为接受的答案已经显示了如何做到这一点。

35赞 Ah Hiang 9/29/2017 #4

为了使用 observable，这是我通常用来显示 observable 数组是否由数据组成的方法。

<div *ngIf="(observable$ | async) as listOfObject else emptyList">
   <div >
        ....
    </div>
</div>
 <ng-template #emptyList>
   <div >
        ...
    </div>
</ng-template>

265赞 user2577907 10/19/2017 #5

在 Angular 4.x.x 中

您可以通过四种方式使用 ngIf 来实现简单的 if-else 过程：

只需使用 If

<div *ngIf="isValid">
    If isValid is true
</div>

将 If 与 Else 一起使用（请注意 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 的内联模板，除非绑定到不同的值。

else 模板为空，除非它被绑定。

0赞 slartidan 2/27/2018

似乎编译器不接受.可能应该删除。...; else ...;

6赞 WasiF 9/7/2018

在angular-6中，我用...进行了测试;否则...并且它起作用了

2赞 th1rdey3 7/12/2020

有没有办法做if-elseif-else？

0赞 Szilard Mihocsa 1/27/2023

4 比 2 的优势是什么？基本上它们都有相同的结果，不同之处在于，在 4 的情况下，我们有一个没有任何内容的额外内容。<div>

6赞 hoogw 1/12/2018 #6

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! -->

NGIF模板

ngif 角度 4

2赞 Amir Touitou 4/17/2018 #7

<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>

0赞 Peter Mortensen 11/4/2021

解释是有道理的。例如，想法/要点是什么？请通过编辑（更改）您的答案来回复，而不是在评论中（没有“编辑：”，“更新：”或类似内容 - 答案应该看起来好像是今天写的）。

2赞 Kalpesh Panchal 8/9/2018 #8

在 Angular 4、5 和 6 中

我们可以简单地创建一个模板引用变量 ²，并将其链接到 *ngIf 指令中的 else 条件

可能的语法 ¹ 为：

<!-- 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 - 指令
模板语法

0赞 Konrad Viltersten 3/15/2022

您的回答表明它对 Angular 4 到 6 有效。2018 年你写的时候是有道理的，但现在，4 年后，它表明它不一定对最新版本有效。我刚刚在 Angular 13 中使用了它，它运行良好。您可能需要考虑更新配方，以使您的答案从出色到更好。

0赞 Nikhil Das Nomula 9/20/2018 #9

我的方法是在组件中有两个标志，并为相应的两个标志提供两个 ngIfs。

它很简单，并且与材料配合得很好，因为 ng-template 和材料不能很好地协同工作。

0赞 Peter Mortensen 11/4/2021

你能提供一个或多个代码示例吗？（但没有“编辑：”、“更新：”或类似内容 - 答案应该看起来就像今天写的一样。

5赞 L Y E S - C H I O U K H 10/11/2018 #10

ngIf/Else 的语法

<div *ngIf=”condition; else elseBlock”>Truthy condition</div>
<ng-template #elseBlock>Falsy condition</ng-template>

使用 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>

使用 NgIf 和 Async Pipe 的可观察对象

更多细节

6赞 RazvanParautiu 11/14/2018 #11

对 HTML 标记或模板使用 if 条件有两种可能性：

*ngIf 指令，来自 CommonModule，在 HTML 标签上;
如果-else

6赞 Sebastian Viereck 5/13/2019 #12

你也可以在 Angular 中使用 JavaScript 短三元条件运算符，如下所示：?

{{doThis() ? 'foo' : 'bar'}}

或

<div [ngClass]="doThis() ? 'foo' : 'bar'">

5赞 Aniket 5/18/2019 #13

ng-template

<ng-template [ngIf]="condition1" [ngIfElse]="template2">
        ...
</ng-template>


<ng-template #template2> 
        ...
</ng-template>

58赞 Code Spy 8/7/2019 #14

对于 Angular 9/8

带示例的源链接

    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>

2赞 AsGoodAsItGets 11/13/2020

问题是，哪个更好？从性能的角度来看，我怀疑第一个指令有 2 个指令需要独立评估，而其他 2 个指令只有一个。如果你把它放在一个包含数千个元素的列表/表格中，它不会更慢吗？

0赞 Bitzu 5/11/2022

如果默认值不真实，则解决方案 1 不好

14赞 Chathuran D 10/24/2019 #15

您可以使用并实现此目的：<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 演示：

现场演示

48赞 Hoang Subin 1/22/2020 #16

只需从 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>

0赞 Islam Murtazaev 3/16/2020

伟大！我们最近移到了 angular 8

0赞 rosiejaneenomar 7/23/2021

1 不起作用，我尝试将条件设置为 false，但它不显示模板 elseBlock

0赞 Hoang Subin 7/26/2021

@rosiejaneenomar 我认为您的代码有问题。如果可以，你可以给我你的代码样本。

0赞 Hoang Subin 12/27/2021

@rosiejaneenomar请按照 Angular 文档中的指南进行操作 angular.io/api/common/NgIf

4赞 Maddy 7/6/2020 #17

<div *ngIf="show; else elseBlock">Text to show</div>
<ng-template #elseBlock>Alternate text while primary text is hidden</ng-template>

0赞 Peter Mortensen 11/4/2021

25赞 Stephen Jenkins 2/14/2021 #18

这里有一些关于 Angular 的 NgIf 和使用语句的漂亮而干净的语法。简而言之，您将在元素上声明一个 ElementRef，然后在块中引用它：elseelse

<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>

源代码取自 Angular 的 NgIf 和 Else 语法。

0赞 arunwithasmile 9/13/2021

我发现只使用一行模板既好又干净

1赞 Stephen Jenkins 2/25/2022

@arunwithasmile相同，这只是两种语法的示例。*除非需要，否则ngIf是要走的路。

40赞 Naeem Bashir 3/24/2021 #19

如果 isShow 为 true，则执行第一行，否则执行第二行，因为 elseBlockShow 用作引用变量。

<div *ngIf="isShow; else elseBlockShow">
  Text to show for If
</div>
<ng-template #elseBlockShow>
  Text to show for else block
</ng-template>

6赞 ajay 6/1/2022 #20

**ngIf else**

<div *ngIf="isConditionTrue;else other_condition">
    your content here
</div>

<ng-template #other_condition>other content here...</ng-template>

**ngIf then else**

<div *ngIf="isConditionTrue;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>


**ngIf then**

<div *ngIf="isConditionTrue;then content"></div>
<ng-template #content>content here...</ng-template>

1赞 Deathstalker 11/3/2022 #21

因此，这实际上并没有使用 ng-if，但许多建议似乎涉及在条件语句中编写文本。我认为这种方式是用最少的代码或复杂性做到这一点的最佳方法。你是法官。

<div>{{variable == null ? 'Testing1' : 'Testing2'}}<div>
OR
<div>{{variable == null ? var1 : var2 }}<div>

7赞 Dummy1 3/14/2023 #22

<div *ngIf="isValid; else templateName">
  If isValid is true
</div>

<ng-template #templateName>
  If isValid is false
</ng-template>

0赞 ErDeep 3/14/2023

和 stackoverflow.com/questions/43006550/how-can-i-use-ngif-else/ 一样...

上一个：将简单的 if-then-else 语句放在一行上 [duplicate]

下一个：在“if”语句中设置多行条件的样式？[已结束]

如何使用“*ngIf else”？

How can I use "*ngIf else"?

评论

评论

评论

评论

评论

评论

在 Angular 4、5 和 6 中

评论

评论

ngIf/Else 的语法

使用 NgIf / Else/ Then 显式语法

使用 NgIf 和 Async Pipe 的可观察对象

评论

评论

评论

评论

评论