Angular-14中文本输入与下拉框联动筛选失效问题修复

你的代码里存在多个导致下拉筛选失效的问题，以下是具体问题和修复后的完整代码：

核心问题点 #

1. 筛选逻辑错误：onEmployeeSearch中误用了未定义的selectedStatus变量，且部门筛选条件匹配错误（绑定的是部门ID却用名称去匹配）
2. 模板变量不匹配：下拉框的[items]绑定了未定义的employeeDepartments，实际组件里是allDepartmentList
3. 不必要的条件隐藏：模板里的*ngIf="selectedSearchCriteria == 'employeeDepartment'"会隐藏下拉框，而组件未定义该变量
4. 表单指令冲突：ng-select同时使用[(ngModel)]和formControlName，导致双向绑定失效
5. 原始数据丢失风险：未正确保存原始员工数据，多次筛选后会导致数据被覆盖

修复后的组件代码（employee.component.ts） #

import { Component, OnInit } from '@angular/core';
import { ToastrService } from 'ngx-toastr';
import { EmployeeService } from 'src/app/features/admin/services/employee.service';
import { IData, PageItem, IEmployeeList } from 'src/app/features/admin/models/employee/employee-list';
declare var $:any;

@Component({
  selector: 'app-employees',
  templateUrl: './employees.component.html',
  styleUrls: ['./employees.component.scss']
})
export class EmployeesComponent implements OnInit {
  allEmployeeList: PageItem[] = [];
  // 保存原始员工数据，避免筛选后丢失
  originalEmployeeData: PageItem[] = [];
  selectedFirstName: string = '';
  // 存储选中的部门ID
  selectedDepartmentId: string = '';
  allDepartmentList: any[] = [];

  constructor(
    private employeeService: EmployeeService,
    private toastr: ToastrService,
  ) { }

  ngOnInit(): void {
    this.loadAllEmployees();
    this.loadAllDepartments();
  }

  loadAllEmployees() {
    this.employeeService.getAllEmployees().subscribe({
      next: (res) => {
        this.allEmployeeList = res.data.pageItems;
        this.originalEmployeeData = [...res.data.pageItems];
      },
      error: (error) => {
        this.toastr.error(error.message);
      }
    })
  }

  loadAllDepartments() {
    this.employeeService.getAllDepartments().subscribe({
      next: (res) => {
        this.allDepartmentList = res.data.pageItems;
      },
      error: (error) => {
        this.toastr.error(error.message);
      }
    })
  }

  onEmployeeSearch() {
    this.allEmployeeList = this.originalEmployeeData.filter(row => {
      // 姓名筛选逻辑
      const matchesFirstName = row.firstName?.toLowerCase().includes(this.selectedFirstName.toLowerCase());
      // 部门筛选逻辑：如果未选部门则通过，否则匹配部门ID
      const matchesDepartment = !this.selectedDepartmentId || row.departmentId === this.selectedDepartmentId;
      return matchesFirstName && matchesDepartment;
    });
  }
}

修复后的模板代码（employee.component.html） #

<div class="card-body">
  <div class="row">
    <div class="col-sm-4 col-xs-6 col-6 ">
      <div class="form-group">
        <label for="firstName">First Name:</label>
        <input type="text" autocomplete="off" class="form-control" id="firstName" [(ngModel)]="selectedFirstName" (input)="onEmployeeSearch()" placeholder="First Name" />
      </div>
    </div>
    <div class="col-sm-4 col-xs-6 col-6 ">
      <div class="form-group">
        <label for="employeeDepartment">Employee Department</label>
        <div class="col-sm-6 col-xs-6 col-6">
          <div class="form-group">
            <label for="employeeDepartment">Employee Department:</label>
            <ng-select 
              [items]="allDepartmentList"
              [selectOnTab]="true"
              [searchable]="true"
              id="employeeDepartment"
              [(ngModel)]="selectedDepartmentId"
              (change)="onEmployeeSearch()"                    
              bindValue="id"
              bindLabel="departmentName"
              placeholder="Select Employee Department"
              [multiple]="false"
              [clearable]="true">
            </ng-select>                    
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<table class="table table-striped table-bordered table-hover">
    <tr *ngFor="let row of allEmployeeList">
        <td>{{ row?.firstName || 'N/A' }}</td>
        <td>{{ row?.lastName || 'N/A' }}</td>
        <td>{{ row?.employeeDepartment?.departmentName || 'N/A' }}</td>
    </tr>
</table>

关键修复说明 #

• 修正筛选逻辑：改用originalEmployeeData作为筛选数据源，避免多次筛选后数据丢失；部门筛选通过departmentId匹配（和下拉框绑定的bindValue="id"对应）
• 移除冲突指令：删除ng-select上的formControlName，避免和[(ngModel)]冲突
• 修复变量绑定：将下拉框的[items]绑定到组件中定义的allDepartmentList
• 移除不必要的隐藏条件：删除*ngIf="selectedSearchCriteria == 'employeeDepartment'"，确保下拉框始终显示
• 规范变量命名：将selectedDepartment改为selectedDepartmentId，明确存储的是部门ID，避免混淆

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