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允许您在某种情况下不满足任何条件的情况下执行操作。

ngIf - 否则对两个ngIf条件

2 个答案: