求Angular场景下由服务端完成员工数据过滤功能的实现示例

1. 定义员工数据接口 #

// employee.model.ts
export interface Employee {
  id: number;
  name: string;
  department: string;
  isActive: boolean; // true=在职，false=已离职
  // 其他员工字段...
}

2. 员工Service实现（所有过滤逻辑集中在此） #

所有数据处理、过滤逻辑全部封装在Service内，UI层只需要传参数拿结果即可：

// employee.service.ts
import { Injectable } from '@angular/core';
import { Observable, of } from 'rxjs';
import { Employee } from './employee.model';

@Injectable({
  providedIn: 'root'
})
export class EmployeeService {
  // 模拟从数据库/接口获取全量员工数据
  private getAllEmployeesFromDb(): Observable<Employee[]> {
    // 实际场景替换为HttpClient调用后端接口
    return of([
      { id: 1, name: '张三', department: '研发部', isActive: true },
      { id: 2, name: '李四', department: '产品部', isActive: false },
      { id: 3, name: '张小明', department: '测试部', isActive: true },
      { id: 4, name: '王五', department: '人事部', isActive: true }
    ])
  }

  /**
   * 对外暴露的获取员工方法
   * @param namePrefix 姓名开头筛选规则，不传则不按姓名过滤
   * @param onlyActive 是否仅展示在职员工，默认false
   */
  getEmployees(namePrefix?: string, onlyActive: boolean = false): Observable<Employee[]> {
    return new Observable(subscriber => {
      this.getAllEmployeesFromDb().subscribe(allEmployees => {
        let result = [...allEmployees];
        // 过滤在职员工逻辑
        if (onlyActive) {
          result = result.filter(emp => emp.isActive);
        }
        // 过滤姓名开头规则逻辑
        if (namePrefix?.trim()) {
          result = result.filter(emp => emp.name.startsWith(namePrefix.trim()));
        }
        subscriber.next(result);
        subscriber.complete();
      })
    })
  }
}

3. UI组件实现（无任何数据过滤逻辑） #

组件只负责用户交互触发和数据渲染，完全不参与数据处理：

// employee-list.component.ts
import { Component, OnInit } from '@angular/core';
import { EmployeeService } from './employee.service';
import { Employee } from './employee.model';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-employee-list',
  templateUrl: './employee-list.component.html'
})
export class EmployeeListComponent implements OnInit {
  employees$!: Observable<Employee[]>;
  // 复选框绑定值
  isOnlyActive = false;
  // 姓名前缀筛选值，可扩展绑定输入框
  namePrefix = '';

  constructor(private employeeService: EmployeeService) {}

  ngOnInit(): void {
    // 初始化默认拉取全部员工
    this.fetchEmployees();
  }

  // 统一调用Service方法获取数据
  fetchEmployees(): void {
    this.employees$ = this.employeeService.getEmployees(this.namePrefix, this.isOnlyActive);
  }
}

4. 组件模板代码 #

<!-- employee-list.component.html -->
<div class="filter-area">
  <!-- 姓名前缀筛选输入框，可按需启用 -->
  <!-- <input 
    type="text" 
    placeholder="输入姓名开头筛选" 
    [(ngModel)]="namePrefix" 
    (input)="fetchEmployees()"
  > -->
  <label>
    <input 
      type="checkbox" 
      [(ngModel)]="isOnlyActive" 
      (change)="fetchEmployees()"
    >
    仅展示在职员工
  </label>
</div>

<ul class="employee-list">
  <li *ngFor="let emp of employees$ | async">
    姓名：{{emp.name}} | 部门：{{emp.department}} | 状态：{{emp.isActive ? '在职' : '离职'}}
  </li>
</ul>

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