*ngIf 指令中的分号与 else 块 - Angular答案

【问题标题】：Semicolon in *ngIf directive with else block - Angular*ngIf 指令中的分号与 else 块 - Angular
【发布时间】：2020-07-15 17:01:18
【问题描述】：

最近我在 Angular 中使用了一个 *ngIf 指令和一个 else 块，我想知道为什么在 Angular docs 中的示例使用分号 (<div *ngIf="condition; else elseBlock">Content to render when condition is true.</div>)，因为这似乎在没有分号也是如此。

不使用分号有什么副作用吗？或者这只是一种更简洁的编码方式？

【问题讨论】：

这是一个 else 块。然后您可以编写<ng-template #elseBlock></ng-template>，以防condition 失败。见这里：stackoverflow.com/q/43006550/6513921
我知道它用于 else 块。但我想知道为什么需要它，因为它似乎也可以在没有分号的情况下工作。也许我写的问题有点太模糊了。我将编辑我的问题。
请注意文档中的one of the examples 没有分号。

标签： html angular angular-ng-if

【解决方案1】：

仅当您使用“else”块时才需要分号。所以， <div *ngIf="condition">（不带分号）是不使用“else”时的规范形式，但<div *ngIf="condition;">（带分号）也是有效的， <div *ngIf="condition; else elseBlock"> 是使用“else”时的必填形式。

在仔细查看documentation 之前，我还没有意识到其他一些有趣的语法选项。

【讨论】：

您所说的“使用 'else' 时是必需的形式”到底是什么意思？因为它在没有分号的情况下仍然有效。
不知道没有分号也可以工作，谢谢。

【解决方案2】：

深谋远虑

回想起来，这是一个非常有趣的问题。实际问题是 <div *ngIf="condition; else elseBlock"> 按预期工作。但<div *ngIf="condition else elseBlock"> 也是如此，那又是什么呢？分号到底需要什么？

说明

事实证明，定义 *ngIf 如何扩展为 [ngIf] 的 Angular microsyntax 规范非常灵活且最初难以掌握。官方的 Angular docs 没有深入。可以在 here 和 here 找到一个很好的解释。解释的要点是微语法定义的形式是

*:prefix="( :let | :expression ) (';' | ',')? ( :let | :as | :keyExp )*"

:prefix：HTML 属性键。

:key：HTML 属性键。

:local：模板中使用的局部变量名。

:export：指令以给定名称导出的值。

:experession：标准角度表达

:keyExp = :key ":"? :expression ("as" :local)? ";"?

:let = "let" :local "=" :export ";"?

:as = :export "as" :local ";"?

看来分号是可选的。此外，在我们的例子中，else 块是一个关键表达式，可以看出冒号是可选的，我们目前没有使用。所以理论上我们也可以使用<div *ngIf="condition else: elseBlock">。因此，ngFor 也可以不带任何分号使用。所以下面的块也可以工作

<div *ngFor="let n of arr let i=index let f=first let l=last">
  {{ n }}
</div>

工作示例：Stackblitz

【讨论】：