如何在Angular HTML中用ngIf/ngFor检测数组相同badge并分组展示？

现有如下员工数组（注：原数组存在语法错误，已修正为标准JSON格式）：

"employees":[  
    {"name":"Hosea", "email":"hosea@gmail.com", "badge":"silver"},  
    {"name":"javier", "email":"javier@gmail.com", "badge":"silver"},  
    {"name":"marston", "email":"marston@gmail.com", "badge":"Gold"},
    {"name":"arthur", "email":"arthur@gmail.com", "badge":"Gold"} 
] 

请问是否可以通过遍历该数组，在HTML中使用ngIf或ngFor指令检测是否存在值相同的badge属性，并实现按Badge分组的展示效果？

当然可以实现，不过更推荐先在组件逻辑层完成数据分组，再用ngFor在模板中渲染，比直接在模板里用ngIf做判断更简洁高效，也符合Angular的"逻辑尽量不放在模板"的最佳实践。

具体实现步骤 #

1. 组件内分组数据

在组件的TypeScript代码中，使用数组的reduce方法将员工数组按badge字段分组：

// 组件.ts文件
import { Component } from '@angular/core';

@Component({
  selector: 'app-employee-list',
  templateUrl: './employee-list.component.html',
})
export class EmployeeListComponent {
  employees = [  
    {"name":"Hosea", "email":"hosea@gmail.com", "badge":"silver"},  
    {"name":"javier", "email":"javier@gmail.com", "badge":"silver"},  
    {"name":"marston", "email":"marston@gmail.com", "badge":"Gold"},
    {"name":"arthur", "email":"arthur@gmail.com", "badge":"Gold"} 
  ];

  // 分组后的员工数据：key为badge值，value为对应员工数组
  groupedEmployees: { [key: string]: typeof this.employees } = {};

  ngOnInit() {
    this.groupedEmployees = this.employees.reduce((groups, employee) => {
      const badge = employee.badge;
      // 如果当前badge不存在于分组中，初始化空数组
      if (!groups[badge]) {
        groups[badge] = [];
      }
      groups[badge].push(employee);
      return groups;
    }, {});
  }
}

2. 模板中渲染分组结果

在HTML模板中，用两层ngFor遍历分组数据，外层渲染badge分组标题，内层渲染该组的员工：

<!-- 组件.html文件 -->
<div *ngFor="let group of groupedEmployees | keyvalue">
  <h3>{{ group.key | titlecase }} Badge</h3>
  <ul>
    <li *ngFor="let employee of group.value">
      {{ employee.name }} - {{ employee.email }}
    </li>
  </ul>
</div>

若要直接在模板中处理（不推荐） #

如果非要在模板里直接判断重复的badge，需要先获取所有唯一的badge值，再通过ngIf过滤，但这种方式逻辑冗余，维护性差：

<!-- 不推荐的模板写法 -->
<div *ngFor="let badge of getUniqueBadges()">
  <h3>{{ badge | titlecase }} Badge</h3>
  <ul>
    <li *ngFor="let employee of employees" *ngIf="employee.badge === badge">
      {{ employee.name }} - {{ employee.email }}
    </li>
  </ul>
</div>

对应的组件中需要添加获取唯一badge的方法：

getUniqueBadges(): string[] {
  return [...new Set(this.employees.map(emp => emp.badge))];
}

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