是否有条件模板插值的语法？

Question

我有一个带有以下元素的角度(2.4.9)模板:

<div *ngIf="a || b || c || d || e">Remaining</div>

我现在面临着根据另一个条件改变迄今为止静态的"剩余"文本的需要:

<div *ngIf="a || b || c || d || e || Z != 'draft'">Initial</div>
<div *ngIf="a || b || c || d || e || Z == 'draft'">Remaining</div>

在*ngIf已经加载了,我想阻止不必重复它,因为我在上面的例子一样,只是为了添加一个额外的条件.

我也想避免这样做:

<div *ngIf="a || b || c || d || e">
    <div *ngIf="Z != 'draft'">Initial</div>
    <div *ngIf="Z == 'draft'">Remaining</div>
</div>

...因为这会改变页面的结构,从而改变样式规则.

所以,不是在div中引入一个具有自己的新元素*ngIf,这会导致我们添加样式规则,我正在寻找类似于条件插值语法的东西,这样我就可以写了

<div *ngIf="many || conditions">{{ status === "DRAFT" ? 'Initial' : 'Remaining' }}</div>

以类似的方式,你也可以做{{ 1 + 1 }},这也是一个返回值的表达式,所以至少在概念上是相似的.

我上面的尝试导致模板解析器爆炸,其中一个看似与此模板无关的不匹配标签,所以它实际上做的并不是立即明显的,但它显然是不正确的.

Answer 1

在Angular4中你可以使用else

<template #other>
  <div>Remaining</div>
</template>

<div *ngIf="a || b || c || d || e || Z != 'draft'; else other">Initial</div>

除了将表达式移动到getter或方法并使用该getter之外,Angular2没有任何内容 *ngIf="..."