如何使用“*ngIf else”？

Posted 2023-02-16

【中文标题】如何使用“*ngIf else”？

【英文标题】：How can I use "*ngIf else"?

【发布时间】：2017-08-17 19:23:33

【问题描述】：

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

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

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

如何使用ngIf else 实现相同的行为？

【参考方案1】：

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

演示：

Plunker

详情：

<ng-template>: 是 Angular 自己实现的<template> 标签，即according to MDN:

html <template> 元素是一种保持客户端的机制 页面加载时不呈现的内容，但可能 随后在运行时使用 javascript 实例化。

【讨论】：

我希望有一种方法可以只使用 而没有像 div 这样的另一个标签，但奇怪的是它不是......我知道 在你使用它时会被删除，但是我认为这有点奇怪。

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

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

@Simon_Weaver 我很难弄明白。但为什么？为什么他们不允许*ngIf 在ng-template 上工作？

这里被忽略它没有被忽略。这是注入ng-template的地方

【参考方案2】：

在 Angular 4.x.x 中

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

只需使用 如果

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

使用 If with 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 当表达式分别为真或假时，模板代替它的位置。

通常是：

then 模板是 ngIf 的内联模板，除非绑定到不同的值。 else 模板是空白的，除非它被绑定。

【讨论】：

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

在 angular-6 中，我用 ...; else ... 进行了测试，它成功了

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

【参考方案3】：

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

【讨论】：

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

【参考方案4】：

要使用 observable，如果 observable 数组包含数据，我通常会这样做。

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

【参考方案5】：

只需添加来自 Angular 8 的新更新。

对于 if 和 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 的 if，我们可以使用 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>

【讨论】：

太棒了！我们最近搬到了 angular 8

1 不工作，我尝试条件为假，但它不显示模板 elseBlock

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

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

【参考方案6】：

如果 isShow 为真，则执行第一行，否则执行第二行，因为 elseBlockShow 用作参考变量。

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

【参考方案7】：

这里有一些关于 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。

【讨论】：

我不觉得使用模板只写一行漂亮又干净

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

【参考方案8】：

您可以使用<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 demo

【参考方案9】：

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

【讨论】：

这不起作用。如果它是正确的，那么它仍然不会增加任何价值，因为接受的答案已经显示了如何去做。

【参考方案10】：

ngif 表达式的结果值不仅仅是布尔值 true 或 false。

如果表达式只是一个对象，它仍然会将其评估为真实性。

如果对象未定义或不存在，则 ngif 会将其评估为假。

常用的是如果一个对象被加载，存在，然后显示这个对象的内容，否则显示“loading.......”。

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

ngif Angular 4

【参考方案11】：

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 和异步管道的 Observables

For more details

【参考方案12】：

ng-template

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


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

【参考方案13】：

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

【讨论】：

解释一下。例如，想法/要点是什么？请通过editing (changing) your answer 回复，而不是在 cmets 中（without "Edit:"、"Update:" 或类似的 - 答案应该看起来像是今天写的)。

【参考方案14】：

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

*ngIf 指令来自 CommonModule，在 HTML 标记上； 如果-否则

【参考方案15】：

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

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

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

【讨论】：

表达式时看起来像 Oracle 大小写.. :-)

您指的是ternary operator which exists in most C-based languages，但这更接近Kotlin's if expressions。

【参考方案16】：

您也可以像这样在 Angular 中使用 JavaScript 短三元条件运算符 ?：

doThis() ? 'foo' : 'bar'

或

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

【参考方案17】：

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

【讨论】：

解释一下。例如，想法/要点是什么？请通过editing (changing) your answer 回复，而不是在 cmets 中（without "Edit:"、"Update:" 或类似的 - 答案应该看起来像是今天写的)。

【参考方案18】：

在 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 - directive Template syntax

【讨论】：

您的回答表明它对 Angular 4 到 6 有效。在 2018 年编写它时它是有意义的，但现在，4 年后，它表明它不一定对最新版本。我刚刚在 Angular 13 中使用过它，它运行良好。您可能需要考虑更新公式以使您的答案变得更好。

【参考方案19】：

我采用的方法是在组件中有两个标志，并为相应的两个标志设置两个 ngIf。

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

【讨论】：

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