在Angular中如何将对象数组按group字段分组并提取对应name值为数组

你可以直接用JavaScript原生的Array.reduce()方法实现，不需要额外引入第三方库，兼容所有Angular支持的浏览器版本，实现逻辑如下：

核心实现代码 #

在你的组件类中添加如下逻辑即可：

// 原始数组
originalArr: {name: string, group: string}[] = [
  { "name":"ABC", "group":"A" },
  { "name":"XYZ", "group":"A" },
  { "name":"KLP", "group":"A" },
  { "name":"AKG", "group":"B" },
  { "name":"DIS", "group":"B" },
  { "name":"FAC", "group":"B" },
  { "name":"TAM", "group":"B" },
  { "name":"NEW", "group":"C" },
  { "name":"UTL", "group":"C" },
  { "name":"WAC", "group":"C" }
];

// 存储分组后的结果
groupedResult!: Record<string, string[]>;

ngOnInit() {
  // 调用分组方法
  this.groupedResult = this.groupByField(this.originalArr);
  // 控制台打印可直接验证输出结构是否符合要求
  console.log(this.groupedResult);
}

// 分组公共方法，可抽离为公共工具函数全局复用
groupByField(arr: {name: string, group: string}[]): Record<string, string[]> {
  return arr.reduce((accumulator, currentItem) => {
    // 对应分组不存在时先初始化空数组
    if (!accumulator[currentItem.group]) {
      accumulator[currentItem.group] = [];
    }
    // 将当前元素的name属性推入对应分组数组
    accumulator[currentItem.group].push(currentItem.name);
    return accumulator;
  }, {} as Record<string, string[]>);
}

可选场景适配 #

如果是RxJS流处理接口返回数据 #

可以直接在pipe中用map运算符处理，不需要额外声明变量中转：

import { map } from 'rxjs';

this.http.get<{name: string, group: string}[]>('你的业务接口地址')
  .pipe(
    map(resArr => resArr.reduce((acc, cur) => {
      if (!acc[cur.group]) acc[cur.group] = [];
      acc[cur.group].push(cur.name);
      return acc;
    }, {} as Record<string, string[]>))
  )
  .subscribe(result => {
    this.groupedResult = result;
  });

模板中渲染分组结果 #

配合Angular内置的keyvalue管道即可遍历输出：

<div *ngFor="let groupItem of groupedResult | keyvalue">
  <h3>分组 {{ groupItem.key }}</h3>
  <ul>
    <li *ngFor="let name of groupItem.value">{{ name }}</li>
  </ul>
</div>

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