如何从模板中获取与Angular中数组中的属性匹配的对象计数？答案

【问题标题】：How to get a count of objects matching a property in array in Angular from within the template?如何从模板中获取与Angular中数组中的属性匹配的对象计数？
【发布时间】：2019-11-18 23:31:34
【问题描述】：

假设我有以下数组“myarr”：

[
{'name':'Mary', 'chapter':'Chapter 1'},
{'name':'Joseph', 'chapter':'Chapter 1'},
{'name':'John', 'chapter':'Chapter 2'},
{'name':'Carl', 'chapter':'Chapter 3'},
{'name':'Jacob', 'chapter':'Chapter 3'}
]

我想计算此数组中标题中包含“第 1 章”的对象的数量。有没有办法在 Angular 的 HTML 模板中做到这一点？

现在我从模板中调用一个函数，如下所示：

{{countNumOf('Chapter 1')}}
{{countNumOf('Chapter 2')}}

使用处理 .ts 中的计数的函数...有没有更聪明的方法可以做到这一点，所以我不必在 .ts 中编写额外的函数？

【问题讨论】：

更聪明的方法是在.ts中编写一个额外的函数。这样，模板就保持简单易读，并专注于呈现而不是逻辑。 componentTypeScript 代码是逻辑应该在的地方。放在那里也可以更容易测试和优化，并避免模板中的代码重复。
我同意@JBNizet，我会为此写一个管道
我认为在链接中实现管道会对您有所帮助。 stackoverflow.com/a/44770768/10377603
永远不要在模板中写入方法，因为它会在每次更改检测时被调用并执行，并且会降低性能。根据场景使用可以是纯管道或不纯管道的管道实现。

标签： angular

【解决方案1】：

如果你可以使用 es6，这是最短的方法：

const count = source.filter(item => item.status === '0').length;

或者没有条件，比如只获取对象的数量：

const count = source.filter(item => item).length;

【讨论】：