如何在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

Answer 2

你可以尝试：

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

这是一种解决方法但应该可行