Angular中如何实现部门切换时分组展示员工并打印部门信息

核心思路 #

先把员工数据按DEPARTMENT字段分组，再在模板中先渲染部门名称，接着遍历展示该部门下的所有员工卡片。无论数据静态还是动态更新，只要重新执行分组逻辑，就能自动切换部门展示。

情况1：Angular（2+）实现 #

1. 组件内分组逻辑

在组件类中通过数组reduce方法将原始员工数组转为以部门名为键、员工数组为值的Map：

// 定义员工数据类型
interface Employee {
  DEPARTMENT: string;
  NAME: string;
  JOBTITLE: string;
  CAMPUS: string;
  PHONE: string;
  EMAIL: string;
}

export class EmployeeComponent implements OnInit {
  // 原始员工数据（从接口/服务获取）
  employees: Employee[] = [];
  // 分组后的员工数据
  groupedEmployees = new Map<string, Employee[]>();

  ngOnInit(): void {
    // 数据加载完成后执行分组
    this.groupByDepartment();
  }

  // 分组方法
  groupByDepartment(): void {
    this.groupedEmployees = this.employees.reduce((map, emp) => {
      const dept = emp.DEPARTMENT;
      if (!map.has(dept)) {
        map.set(dept, []);
      }
      map.get(dept)?.push(emp);
      return map;
    }, new Map<string, Employee[]>());
  }

  // 若数据动态更新（比如部门变更），调用此方法重新分组
  updateEmployees(newData: Employee[]): void {
    this.employees = newData;
    this.groupByDepartment();
  }
}

2. 模板渲染

使用Angular的KeyValuePipe遍历分组后的Map，先渲染部门标题，再循环展示该部门下的员工卡片：

<!-- 遍历每个部门 -->
<div *ngFor="let [deptName, empList] of groupedEmployees | keyvalue">
  <!-- 部门名称 -->
  <h2>{{ deptName }}</h2>

  <!-- 遍历当前部门的员工，复用你原有的卡片结构 -->
  <div class="col-12 col-sm-6 col-xl-4 col-3xl-3 mb-4" *ngFor="let item of empList">
    <div class="card">
      <div class="card-body">
        <!-- 可选：若不想重复显示部门，可删除此行 -->
        <p class="card-text card-subtle-text ">{{ item.DEPARTMENT }}</p>
        <h3 class="card-title card-heading card-title-mark">{{ item.NAME }}</h3>
        <span class="card-support">{{ item.JOBTITLE }}</span>
        <p class="card-text">{{ item.CAMPUS }}</p>
        <p class="card-text"><strong>Phone: </strong>{{ item.PHONE }}</p>
        <p class="card-text"><strong>Email: </strong><span [innerHTML]="item.EMAIL"></span></p>
      </div>
    </div>
  </div>

  <!-- 部门间分隔线（可选） -->
  <hr class="my-5">
</div>

情况2：AngularJS（1.x）实现 #

如果你的项目是AngularJS（从模板中的ng-bind-html判断可能属于这种），可以这样实现：

1. 控制器分组逻辑

angular.module('yourApp').controller('EmployeeCtrl', function($scope) {
  // 原始员工数据
  $scope.employees = [];
  // 分组后的员工对象
  $scope.groupedEmployees = {};

  // 分组函数
  function groupByDepartment() {
    $scope.groupedEmployees = {};
    angular.forEach($scope.employees, function(emp) {
      const dept = emp.DEPARTMENT;
      if (!$scope.groupedEmployees[dept]) {
        $scope.groupedEmployees[dept] = [];
      }
      $scope.groupedEmployees[dept].push(emp);
    });
  }

  // 数据加载后执行分组
  groupByDepartment();

  // 动态更新数据时重新分组
  $scope.updateEmployees = function(newData) {
    $scope.employees = newData;
    groupByDepartment();
  };
});

2. 模板渲染

使用ng-repeat遍历分组后的对象：

<div ng-repeat="(deptName, empList) in groupedEmployees">
  <h2>{{ deptName }}</h2>

  <div class="col-12 col-sm-6 col-xl-4 col-3xl-3 mb-4" ng-repeat="item in empList">
    <div class="card">
      <div class="card-body">
        <p class="card-text card-subtle-text ">{{ item.DEPARTMENT }}</p>
        <h3 class="card-title card-heading card-title-mark">{{ item.NAME }}</h3>
        <span class="card-support">{{ item.JOBTITLE }}</span>
        <p class="card-text">{{ item.CAMPUS }}</p>
        <p class="card-text"><strong>Phone: </strong>{{ item.PHONE }}</p>
        <p class="card-text"><strong>Email: </strong><span ng-bind-html="item.EMAIL"></span></p>
      </div>
    </div>
  </div>

  <hr class="my-5">
</div>

关键说明 #

• 分组逻辑是核心：把扁平的员工数组转成按部门聚合的结构，确保同一部门的员工被放在一起。
• 动态更新适配：只要员工数据（或部门字段）变化时重新执行分组，Angular/AngularJS的变更检测会自动更新视图，实现部门切换效果。
• 样式调整：可以根据需求修改部门标题的样式，或调整员工卡片的布局，保持和现有UI一致。

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