Angular7中如何实现相似分类项去重并附带展示统计总数？

核心逻辑是把原本直接循环拆分原始字符串的流程，前置增加去重+频次统计的预处理环节，避免模板里直接渲染拆分后的重复分类项。

具体实现步骤 #

1. 替换模板中直接拆分字符串做循环的写法，这类模板内的表达式会在每次变更检测时重复执行split操作，既浪费性能也拿不到统计值
2. 在组件的TypeScript逻辑中封装分类统计方法，对拆分后的分类项做统一清洗：
   • 拆分逗号分隔的字符串后，先对每一项做去前后空格、过滤空值的处理，避免带空格的同分类被判定为不同值
   • 用Map结构做分类频次累计，每遇到一个分类值就给对应计数+1
   • 把统计结果转成包含分类名、出现次数的结构化数组返回
     示例代码：

   getCategoryWithCount(rawCategoryStr: string) {
     if (!rawCategoryStr) return [];
     const rawCategoryList = rawCategoryStr.split(',')
       .map(item => item.trim())
       .filter(item => item.length > 0);
     const categoryCounter = new Map<string, number>();
     rawCategoryList.forEach(cate => {
       categoryCounter.set(cate, (categoryCounter.get(cate) || 0) + 1);
     });
     // 可根据需求加排序逻辑，比如按计数从高到低排列
     return Array.from(categoryCounter, ([name, count]) => ({ name, count }));
   }
   

3. 调整模板渲染逻辑，直接循环统计完成的结构化数组，按钮文本拼接分类名和对应计数：

   <mat-card-actions *ngFor="let item of getCategoryWithCount(category.Category)" (click)="onFilterByCategory(item.name)">
     <button mat-stroked-button color="primary">{{ item.name }} ({{ item.count }})</button>
   </mat-card-actions>
   

可优化的细节 #

• 如果分类数据是接口返回后就固定不变的，不需要每次变更检测都跑统计逻辑，可以在拿到接口数据的时机就把统计好的数组存在组件属性里，模板直接读取属性渲染，减少重复计算
• 遇到分类值大小写不统一的场景（比如"WIDE"和"wide"），可以在统计时统一把字符串转为小写做匹配键，避免同分类因为大小写差异被重复计数
• 需要调整展示顺序时，只需要在最终返回数组前加sort规则即可，比如按分类名字母序排列、按计数降序排列

内容的提问来源于stack exchange，提问作者A. B