具有reduce函数的Angular Sum总计

Question

从here开始，我试图通过在angular bindings中使用javascript reduce函数来为一个对象数组求一个特定的属性。

零件

totals: total[] = [{itemCount:1},{itemCount:2},{itemCount:3}, {itemCount:4}];

HTML

<div>{{ totals.map(t => t.itemCount).reduce((a, b) => a + b, 0) }}</div>

有了上面，我得到错误：“绑定不能包含任务”

stackblitz mockup

提前致谢

编辑

我已将@quirimmo提供的答案标记为正确，但我也想解决@jo_va的答案。

我觉得在我的组件中提供一个角度方法是正确的方法@quirimmo，但在我的情况下，组件是在客户端请求上编译的JIT，此时，我仍然不确定如何在该组件中动态添加该方法施工。这引导我在HTML中使用Expression方法，并故意避免@ jo_va对最佳实践的回答。

我的解决方案是将服务作为对象传递给组件，并将该方法放在该服务中以供参考。

谢谢你的帮助S.O.

Answer 1

在组件内部定义一个函数，该函数返回减少的值，并在绑定调用内部执行组件的功能：

const totals = [{itemCount:1},{itemCount:2},{itemCount:3}, {itemCount:4}];

console.log(totals.reduce((acc, val) => acc += val.itemCount, 0));

Answer 2

你的reduce功能很好用。然而，在角度绑定中使用表达式是一种不好的做法。

将逻辑移动到组件并调用方法或getter。

Answer 3

Map和reduce返回一个新数组。这是您的错误来自的地方。

你可以使用像这个https://stackblitz.com/edit/angular-whrfxp这样的吸气剂。模板不应包含计算。