我有一个带有以下元素的角度(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 }}
,这也是一个返回值的表达式,所以至少在概念上类似。
我上面的尝试导致模板解析器爆炸,其中一个看似与此模板无关的无法匹配的标签,所以它实际上做的并不是很明显,但显然是不正确的。
答案 0 :(得分:6)
在Angular4中你可以使用else
<template #other>
<div>Remaining</div>
</template>
<div *ngIf="a || b || c || d || e || Z != 'draft'; else other">Initial</div>
Angular2没有任何内容,除了将表达式移动到getter或方法并在*ngIf="..."
中使用该getter
答案 1 :(得分:0)
我的模板中有另一个错误。正如RemyaJ所说,我的示例代码可以正常工作。