ngIf - else 与两个 ngIf 条件

Question

考虑以下代码示例：

<div *ngIf="condition; else elseBlock">
    <!-- markup here --> 
</div>
<ng-template #elseBlock>
     <div>
         <!-- additional markup here -->
     </div> 
</ng-template>

我可以实现相同功能的另一种方法是：

<div *ngIf="condition">
    <!-- markup here --> 
</div>
<div *ngIf="!condition">
     <!-- additional markup here -->
</div>

我想知道具体应该使用这两种方式中的哪一种，为什么？

Answer 1

使用 else 可以避免写两次条件，这可能是错误的来源，所以我会优先使用它。如果愿意，您也可以将 else 模板放在模板的底部，这样可以使模板更易于阅读。

如果你用 async 管道展开一个 observable，那么写起来就容易多了

<div *ngIf="myItems$ | async as myItems; else noItemsYet">

而不是添加另一个 <div *ngIf="!(myitems | async)">，这也会强制 Angular 创建另一个内部订阅。

那些根据意见投票关闭这个问题的人被误导了。人们对某件事可能有不同的看法并不意味着没有值得提出的有效观点。

如果使用 else 只是一个偏好问题，我怀疑 Angular 开发人员是否会像他们那样将其优先用于 Angular 4。

正如@Ishnark 指出的那样，也可能会影响性能。

Answer 2

第一种方案更好。尽管两者都实现了相同的目标，但第一个更清晰，更容易在逻辑上遵循。

你只用第一个解决方案做一次检查。这是一个很好的解决方案，因为：

评估条件需要时间。
使用else，只需检查一次。在您的第二个解决方案中，您检查是否满足条件（这需要时间），然后检查是否满足 相同条件 的条件。
使用 else 可以让你在两个条件都不满足的情况下采取行动。

编辑：参见@toazaburo 的回答，解决了不安全问题。

ngIf - else 与两个 ngIf 条件

ngIf - else vs two ngIf conditions

angular-ng-if

angular2-template

angular