Angular组件加载时统计API返回数据中type与action相同项数量

没问题，我来帮你搞定这个统计需求！首先理清楚思路：我们需要把数组里type和action完全相同的对象归为一组，统计每组的数量，最后转换成你想要的格式。

第一步：优化数据获取方法（可选但推荐） #

你原来的getData方法里用了map(res => res.json())，如果你的Angular版本是4.3及以上（使用HttpClient而非旧的Http），其实不需要手动解析JSON，HttpClient会自动帮你完成这一步，优化后的代码如下：

import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

// 确保已在构造函数中注入HttpClient
constructor(private http: HttpClient) {}

private getData(): Observable<any[]> {
  const url = 'http...'; // 替换为你的实际接口地址
  return this.http.get<any[]>(url);
}

第二步：实现统计函数 #

核心是用数组的reduce方法做分组计数，这是处理这类累加统计场景的最优方案之一。下面是正确的统计函数实现：

countItems(items: any[]): { type: string; action: string; count: number }[] {
  // 用reduce构建临时映射对象，key为type和action的组合，value为统计信息
  const countMap = items.reduce((accumulator, currentItem) => {
    // 生成唯一组合键，比如"science-on"，确保相同type+action的对象归为一组
    const groupKey = `${currentItem.type}-${currentItem.action}`;
    
    // 若当前组合键未在映射中，初始化统计项
    if (!accumulator[groupKey]) {
      accumulator[groupKey] = {
        type: currentItem.type,
        action: currentItem.action,
        count: 0
      };
    }
    
    // 对应组计数加一
    accumulator[groupKey].count++;
    return accumulator;
  }, {} as Record<string, { type: string; action: string; count: number }>);

  // 将映射对象的value转为数组，得到最终格式
  return Object.values(countMap);
}

第三步：在组件中使用 #

比如在组件的ngOnInit钩子中调用，获取数据后执行统计：

import { OnInit } from '@angular/core';

export class YourComponent implements OnInit {
  // 定义变量存储统计结果，供模板渲染使用
  statsResult: { type: string; action: string; count: number }[] = [];

  constructor(private http: HttpClient) {}

  ngOnInit(): void {
    this.getData().subscribe({
      next: (data) => {
        this.statsResult = this.countItems(data);
        console.log('统计结果:', this.statsResult);
        // 这里可以做后续渲染或逻辑处理
      },
      error: (err) => {
        console.error('获取数据失败:', err);
      }
    });
  }

  // 上面的getData和countItems方法放在这里
}

原理说明 #

• reduce遍历数组时，用type-action字符串作为唯一标识，将相同组合的对象归类到同一个键下；
• 每遍历到对应组合的对象，就将该组的计数加一；
• 最后用Object.values()把映射对象转换为数组，就得到了你期望的[{type:"science", action:"on", count:3}, ...]格式。

内容的提问来源于stack exchange，提问作者pinks