具有减少功能的角总和答案

【问题标题】：Angular Sum totals with reduce function具有减少功能的角总和
【发布时间】：2019-02-04 20:50:47
【问题描述】：

从here 开始，我试图通过在角度绑定中使用 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>

根据上述情况，我收到错误消息：“绑定不能包含分配”

提前致谢

编辑

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

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

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

感谢 S.O. 的帮助

【问题讨论】：

【解决方案1】：

在你的组件内部定义一个函数，它返回减少的值，并在绑定调用组件的函数内部：

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

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

【讨论】：

【解决方案2】：

您的reduce 功能运行良好。但是，在角度绑定中使用表达式是一种不好的做法。

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

【讨论】：

【解决方案3】：

Map 和 reduce 返回一个新数组。这就是您的错误的来源。

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

【讨论】：

【解决方案4】：

totals.reduce((a, b) => a += (b. itemCount), 0) 有效

【讨论】：