ngIf - else 与两个 ngIf 条件 [关闭]答案

【问题标题】：ngIf - else vs two ngIf conditions [closed]ngIf - else 与两个 ngIf 条件 [关闭]
【发布时间】：2017-11-24 17:38:52
【问题描述】：

考虑以下代码示例：

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

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

【问题讨论】：

如果这里的有很多行说超过 10 行，我更喜欢使用 elseBlock，它也将帮助其他人知道有一个否定部分会被显示。如果标记内容是几行少于 10 行，两个 ngIf 就可以了（我的个人喜好）
致近距离投票者：不，这不是意见问题。尽管有些人相信地球是平的，但这并没有使地球是否平的问题“主要基于意见”。
我已经改写了这个问题，所以它不会在没有任何事实的情况下得出意见。我想现在这个问题并没有征求任何人的意见，而是寻求选择两种方式中的一种来实现某事的理由。如果现在投票开放，我将不胜感激，因为答案提供了支持第一个选项的理由。 @torazaburo 我希望你会同意
是的，同意非关闭情绪。对于何时在两个ifs 上使用else 的问题，有一个非基于意见的答案——当你真的想要一个else 时！这归结为一个问题，“我看到代码写着if (a < 1) foo; if (a >= 1) bar;。这比if (a < 1) foo else bar; 有优势吗？”而这个优势可能是，“使用 else 可以避免两次编写条件，这可能是错误的来源”和干燥你的代码，正如 user663031/toazaburo 所说。

标签： angular angular2-template angular-ng-if

【解决方案1】：

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

如果您使用 async 管道解开 observable，那么编写起来会容易得多

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

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

那些投票结束这个问题的人是被误导的。人们可能对某事有不同的看法并不意味着没有值得提出的有效观点。

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

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

【讨论】：

【解决方案2】：

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

您只对第一个解决方案进行一次检查。这是一个很好的解决方案，因为：

评估条件需要时间。
通过使用else，您只需检查一次。在您的第二个解决方案中，您检查是否满足条件（这需要时间），然后检查是否满足 相同条件 的不满足。
使用 else 可以让您在不满足任何条件的情况下执行操作。

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

【讨论】：

Ishnark 和@toazaburo 你的回答对我来说很有意义。尤其是除了 if 之外还有一个“else”这一事实可以立即清楚地表明，如果此检查失败，则还有另一个模板。此外，如果在“if-else”块的情况下遵循相同的单检查规则而不是在我们使用两个 if 语句时进行两次检查，那么性能明智，那么是的，我想应该使用第一个。现在另一个问题，我应该将哪一个标记为已接受的答案？ :-p
我认为@toazaburo 的解决方案更适用于您的情况（我假设您的ngIf 中的条件相对简单，因此性能可能不是问题）。
没错。然后接受他的回答。但也感谢您的投入:)