angular - ngIf - else 与两个 ngIf 条件

标签 angular angular2-template angular-ng-if

<分区>

考虑以下代码示例:

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

我想知 Prop 体应该使用这两种方式中的哪一种,为什么?

最佳答案

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

如果您使用 async 展开一个可观察对象管道,那么写起来就容易多了

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

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

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

如果使用 else这仅仅是一个偏好问题,我怀疑 Angular 开发人员是否会像他们那样为 Angular 4 优先考虑它。

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

关于angular - ngIf - else 与两个 ngIf 条件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44682495/

相关文章:

angular - 更改 ng-multiselect-dropdown 的 css

angular - 如何在 IntelliJ IDEA 社区版中开发 Angular/React

typescript - 使用 typescript 将接口(interface)与 angular 2 中的 html 绑定(bind)

javascript - Angular 2 - ngfor - 带空格的字段

angular - 如何计算从现在到 Angular 中声明的一天之间的总天数?

html - Bootstrap AngularJS 如果没有 li 则隐藏 ul

Angular Reactive Form 检查 FormControl 是否存在于测试中

javascript - Protractor 测试 Angular 2 和点击事件

angular - 对 Angular 2 应用程序进行版本控制

javascript - Angular 表达式执行顺序(带 ngif 的分层 div)似乎未按预期工作