在DOM上使用插值方法

Question

我试图在一个对象数组上使用reduce来产生一个数字：{{ (unit.activeLease$ | async)?.openReceivables.reduce( (sum, receivable) => sum + receivable.balance, 0) | currency:'USD'}}但在开发人员工具中我得到一个错误Parser Error: Missing expected )指向语句的开头。我不允许在里面有功能吗？

Answer 1

Angular组件模板中不允许使用函数;相反的做法需要在JIT编译模式下使用eval。

组件类是代码所属的位置。为了在模板中使用，

(sum, receivable) => sum + receivable.balance, 0)

函数应定义为组件方法。

组件模板中对冗长代码的需求表明它需要重构。 activeLease$ observable应该在将其暴露给模板之前进行预处理，例如：

balance$ = activeLease$.map(openReceivables => 
  openReceivables.reduce((sum, receivable) => sum + receivable.balance, 0)
)