angular - 如何在 Angular 模板中声明变量？

Question

这是源代码

<div>
{{ getActualData() }}
</div>
<div>
{{ getVirtualData() }}
</div>
<div>
 {{ getActualData() - getVirtualData() }}
</div>

这就是我要的。

<div>
{{ actual = getActualData() }}
</div>
<div>
{{ virtual = getVirtualData() }}
</div>
<div>
{{ actual - virtual }}
</div>

由于两个函数比较复杂，我想暂时保存数据，并尽快计算差异。
有没有办法做到这一点？

Answer 1

您可以使用 在模板中声明变量let 这将评估函数并获得结果，使用 ngIf 实际检查值是否存在并分配给变量

<div *ngIf="getActualData(); let actual" > 
<div *ngIf="getVirtualData(); let virtual" > 
 {{actual - virtual}}
</div>

DEMO