我如何使用“*ngIf-else”？

Question

我正在使用Angular，我想使用*ng如果其他（自版本4起提供）在此示例中：

<div*ngIf=“有效”>此处有内容。。。</div><div*ngIf=“！isValid”>此处的其他内容。。。</div>

我如何实现与ng如果其他?

Answer 1

角度4和5:

使用其他的:

<div*ngIf=“isValid；else other_content”>此处的内容。。。</div><ng-template#other_content>此处的其他内容</ng模板>

您也可以使用然后是其他:

<div*ngIf=“isValid；then content else other_content”>此处被忽略<ng-template#content>此处的内容</ng模板><ng-template#other_content>此处的其他内容</ng模板>

或者然后单独使用：

<div*ngIf=“isValid；then content”><ng-template#content>此处的内容</ng模板>

演示：

Plunker公司

细节：

<ng模板>：是Angular自己实现的<模板>标签，它是根据MDN:

HTML<模板>元素是保持客户端的机制加载页面时不呈现的内容，但可以随后在运行时使用JavaScript进行实例化。

Answer 2

角度4.x.x

你可以使用ng如果以四种方式实现简单如果-其他的程序：

1. 只需使用如果

   <div*ngIf=“有效”>如果isValid为true</div>

2. 使用如果有Else（请注意模板名称)

   <div*ngIf=“isValid；else templateName”>如果isValid为true</div><ng-template#templateName>如果isValid为false</ng-模板>

3. 使用如果有那么（请注意模板名称)

   <div*ngIf=“isValid；then-templateName”>这里从来没有出现过</div><ng-template#templateName>如果isValid为true</ng-模板>

4. 使用If with Then和Else

   <div*ngIf=“isValid；然后是TemplateName else elseTemplateName”>这里从来没有出现过</div><ng-template#thenTemplateName>如果isValid为true</ng-模板><ng-template#elseTemplateName>如果isValid为false</ng-模板>

提示：ng如果评估表达然后渲染然后或其他的当表达式分别为true或falsy时，将模板放置在其位置。

通常情况下：

• 然后template是的内联模板ng如果除非绑定到不同的值。
• 其他的除非绑定，否则模板为空。

Answer 3

对于角度9/8

来源链接 带示例

导出类AppComponent{isDone=true；}

1） *ng如果

<div*ngIf=“isDone”>完成了！</div><!-- 取反运算符--><div*ngIf=“！完成”>还没有完成！</div>

2） *ngIf和Else

<ng-container*ngIf=“isDone；elseNotDone”>完成了！</ng-container><ng-template#elseNotDone>还没有完成！</ng-模板>

3） *ngIf、Then和Else

<ng容器*ngIf=“isDone；then iAmDone；else iAmNotDone”></ng-container><ng-template#iAmDone>完成了！</ng-模板><ng-template#iAmNotDone>还没有完成！</ng-模板>

Answer 4

只需添加Angular 8的新更新即可。

1. 如果与else一起使用，我们可以使用ng如果和ngIf其他.

   <ng-template[ngIf]=“condition”[ngIf-Else]=“elseBlock”>条件为true时要呈现的内容。</ng-模板><ng-template#elseBlock>条件为false时要呈现的内容。</ng-模板>

2. 如果有，我们可以使用ng如果和ngIfThen公司.

   <ng-template[ngIf]=“condition”[ngIf Then]=“then Block”>此内容从未显示</ng-模板><ng模板#thenBlock>条件为true时要呈现的内容。</ng-模板>

3. 如果有then和else，我们可以使用ng如果,ngIfThen公司、和ngIf其他.

   <ng-template[ngIf]=“condition”[ngIf Then]=“thenBlock”[ngI fElse]=“elseBlock”>此内容从未显示</ng-模板><ng-template#thenBlock>条件为true时要呈现的内容。</ng-模板><ng-template#elseBlock>条件为false时要呈现的内容。</ng-模板>

Answer 5

如果isShow为true，则执行第一行，否则执行第二行，因为elseBlockShow公司正在用作参考变量。

<div*ngIf=“isShow；else elseBlockShow”>要为If显示的文本</div><ng-template#elseBlockShow>为else块显示的文本</ng-模板>

Answer 6

为了处理可观测数据，如果可观测数组由数据组成，我通常会这样显示。

<div*ngIf=“（observable$|async）as listOfObject else emptyList”><div>....</div></div><ng-template#emptyList><div>...</div></ng-模板>

Answer 7

下面是Angular的NgIf的一些简洁的语法，并使用其他的声明。简而言之，您将声明一个元素参考号然后在其他的块：

<div*ngIf=“isLoggedIn；else loggedOut”>欢迎回来，朋友。</div><ng-template#loggedOut>请朋友登录。</ng-模板>

我从NgIf、Else、Then我发现这一点得到了很好的解释。

它还演示了如何使用<ng模板>语法：

<ng-template[ngIf]=“isLoggedIn”[ngIf-Else]=“loggedOut”><div>欢迎回来，朋友。</div></ng-模板><ng-template#loggedOut><div>请朋友登录。</div></ng-模板>

并且还使用<ng控制器>如果这就是你想要的：

<ng控制器*ngIf=“isLoggedIn；then loggedIn:else loggedOut”></ng-container><ng-template#loggedIn><div>欢迎回来，朋友。</div></ng-模板><ng-template#loggedOut><div>请朋友登录。</div></ng-模板>

来源取自这里是Angular的NgIf和Else语法.

Answer 8

你可以使用<ng控制器>和<ng模板>要实现这一点：

<ng-container*ngIf=“isValid；then template1 else template2”></ng-container><ng-template#template1>模板1包含</ng-模板><ng-template#template2>模板2包含</ng-模板>

你可以找到StackBlitz公司下面的现场演示：

现场演示

Answer 9

由于Angular 17，您可以使用内置控制流，一种可选的模板语法，用于有条件地显示、隐藏或重复元素。它允许你这样做如果不是这样如下所示：

@if（有效）{此处的内容。。。}@其他{此处的其他内容。。。}

使用此语法，无需使用ng模板对于其他的案例。此外，它允许@否则，如果，这在以前是不可能的。

Answer 10

<div*ngIf=“isValid；else templateName”>如果isValid为true</div><ng-template#templateName>如果isValid为false</ng-模板>

Answer 11

“bindEmail”将检查电子邮件是否可用。如果电子邮件确实存在，则会显示“注销”。否则将显示“登录”。

<li*ngIf=“bindEmail；然后注销，否则登录”></li>注销登录

Answer 12

您还可以使用JavaScript短三元条件运算符?角度如下：

｛｛doThis（）？“foo”：“bar”｝｝

或

<div[ngClass]=“doThis（）？'foo'：'bar'”>

Answer 13

**ng如果其他**<div*ngIf=“isConditionTrue；else other_condition”>此处显示您的内容</div><ng-template#other_condition>此处的其他内容</ng模板>**ngIf然后其他**<div*ngIf=“isConditionTrue；然后content-elset-other_content”>此处被忽略</div><ng-template#content>此处的内容</ng模板><ng-template#other_content>此处的其他内容</ng模板>**ngIf那么**<div*ngIf=“isConditionTrue；then content”><ng-template#content>此处的内容</ng模板>

Answer 14

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

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

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

常见的用法是如果加载了一个对象，该对象存在，然后显示该对象的内容，否则显示“正在加载……”。

<div*ngIf=“！object”>仍在加载。。。。。。。。。。。</div><div*ngIf=“对象”><!-- 此对象的内容-->object.info，object.id，object.name。。。等。</div>

另一个例子：

事物={汽车：“本田”，鞋款：“Nike”，衬衫：“Tom Ford”，watch:“Timex”};<div*ngIf=“things.car；else noCar”>好车！</div><ng-template#noCar>叫优步。</ng-模板><!-- 好车！-->

另一个例子：

<div*ngIf=“things.car；出租汽车”>漂亮的{{汽车}}！</div><!-- 漂亮的本田！-->

ngif模板

ngif角度4

Answer 15

有两种可能使用如果HTML标记或模板的条件：

1. *来自CommonModule的ngIf指令，位于HTML标记上；
2. if-else公司

Answer 16

ng模板

<ng-template[ngIf]=“condition1”[ngIf-Else]=“template2”>...</ng-模板><ng-template#template2>...</ng-模板>

Answer 17

ngIf/Else语法

<div*ngIf=“条件；else elseBlock“>真实条件<ng-template#elseBlock>错误条件

使用NgIf/Else/Then显式语法

要添加然后模板，我们只需将其显式绑定到模板。

<div*ngIf=“条件；然后单击Block else elseBlock“></div（分频）><ng-template#thenBlock>Then模板Else模板

使用NgIf和异步管道的可观测值

有关更多详细信息

Answer 18

角度4.0如果…否则语法与Java中的条件运算符非常相似。

在Java中，您用于“条件？stmnt1:stmnt2”.

在Angular 4.0中，您使用*ngIf=“condition；then stmnt1 else stmnt2”.

Answer 19

要显示的文本<ng template#elseBlock>主文本隐藏时的备用文本</ng template>

Answer 20

Angular 17支持if、else-if和else的长等待功能。

您可以按照以下语法进行操作：

`@if（）{<div>如果条件为内部</div>}@else if（）{<div>内部if-else条件}@其他{<div>其他内部</div>}`

Answer 21

角度4、5和6

我们只需创建一个模板引用变量 ²并将其链接到*ngIf指令中的else条件

可能的语法 ¹是：

<!-- 仅当条件--><div*ngIf=“condition”></div（分频）><!-- 或--><ng-template[ngIf]=“condition”><div></div></ng-template><!-- If和else条件--><div*ngIf=“condition；else elseBlock”></div（分频）><!-- 或--><ng-template#elseBlock></ng模板><!-- If-then-else--><div*ngIf=“condition；then then Block else elseBlock”></div><ng-template#thenBlock></ng模板><ng-template#elseBlock></ng模板><!-- If和else条件（本地存储条件值）--><div*ngIf=“condition as value；else elseBlock”>{value}}</div><ng-template#elseBlock></ng模板>

演示： https://stackblitz.com/edit/angular-feumnt？嵌入=1&file=src/app/app.component.html

资料来源：

1. NgIf-指令
2. 模板语法

Answer 22

<div*ngIf=“this.model.SerialNumber！=''；then ConnectedContent else DisconnectedContent”class=“data-font”></div>已连接断开连接

Answer 23

因此，这实际上并不是使用ng-if，但许多建议似乎都是针对在条件语句中编写文本。我认为这种方法是用最少的代码或复杂度实现这一目标的最佳方法。你是法官。

{variable==null？“Testing1”：“Testing2”}}或{variable==null？var1:var2}}

Answer 24

我使用的方法是在组件中有两个标志，对应的两个标志有两个ngIf。

由于ng模板和材料不能很好地结合在一起，所以它很简单，并且与材料配合得很好。

Answer 25

@if-else公司

在Angular的旧版本中，我们使用了*ngIf和*ngIf=“condition；else elseBlock”。

这一切在Angular 17中都得到了改善，18运行时性能提高了90%。

我们现在可以使用基本的@if语法了。

@if（已验证）{<button>注销</button>}

我们也可以使用这样的if-else语法。

@if（已验证）{<button>注销</button>}@其他{<button>注册</button>}