如何在Angular的模板中声明变量？答案

【问题标题】：How to declare variable in template of Angular?如何在Angular的模板中声明变量？
【发布时间】：2018-08-04 04:11:45
【问题描述】：

这是源代码

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

这就是我想要的。

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

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

【问题讨论】：

标签： angular templates

【解决方案1】：

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

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

DEMO

【讨论】：

太棒了！，你能解释一下吗？我不确定函数结果如何设置为变量。谢谢
上面添加了解释
它不适用于 Angular 5。有没有办法为 Angular 5 做到这一点
如果函数返回一个布尔值怎么办？如果 bool 为 false，则根本不会显示 div。

【解决方案2】：

你可以试试：

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

这是一种解决方法，但应该可以工作

【讨论】：