Angular - 如何使用 Angular 中的选择下拉菜单执行高级搜索

Question

在 Angular-13 中，我使用两 (2) 个文本输入和一 (1) 个选择下拉菜单执行高级搜索。 有这个枚举：

export const EMPLOYEE_STATUS_DATA = [
  {
    'key': 0,
    'value': 'Inactive'
  },
  {
    'key': 1,
    'value': 'Active'
  }
]

界面：

    export interface PageItem {
      id: string;
      firstName: string;
      lastName: string;
      employeeStatus: number;
    }
    
    export interface IData {
      pageItems: PageItem[];
      pageSize: number;
      currentPage: number;
      numberOfPages: number;
      totalRecord: number;
      previousPage: number;
    }
    
    export interface IEmployeeList {
      data: IData;
      successful: boolean;
      message: string;
      statusCode: number;
    }

然后我有employees.component.ts：

    import { Component, ViewChild, ElementRef, TemplateRef, 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';
    import { EMPLOYEE_STATUS_DATA } from 'src/app/core/enums/employeestatus';
    declare var $:any;
    
    @Component({
      selector: 'app-employees',
      templateUrl: './employees.component.html',
      styleUrls: ['./employees.component.scss']
    })
    export class EmployeesComponent implements OnInit {
      allEmployeeList: any[] = [];
      employeeData: PageItem[] = this.allEmployeeList;
      selectedFirstName: string = '';
      selectedLastName: string = '';
      selectedStatus: number = -1;
      constructor(
        private employeeService: EmployeeService,
        private toastr: ToastrService,
      ) { }
    
      ngOnInit(): void {
        this.loadAllEmployees();
        this.employeeStatusData = EMPLOYEE_STATUS_DATA;
      }
    
      loadAllEmployees() {
        this.employeeService.getAllEmployees().subscribe({
          next: (allEmployeeList = res.data.pageItems;
          this.employeeData = res.data.pageItems;
          },
          error: (error) => {
            this.toastr.error(error.message);
          }
        })
      }

  ngAfterViewInit(){
    $(document).ready(function(){
    //Initialize Select2 Elements
    $('.select2').select2()

    //Initialize Select2 Elements
    $('.select2bs4').select2({
      theme: 'bootstrap4'
    })
    });
  }

      onEmployeeSearch() {
        this.allEmployeeList = this.employeeData.filter(
          (row) =>
            row.firstName
              ?.toLowerCase()
              .includes(this.selectedFirstName?.toLowerCase()) &&
            row.lastName
              ?.toLowerCase()
              .includes(this.selectedLastName?.toLowerCase() &&
        (this.selectedStatus !== -1
          ? row.employeeStatus === this.selectedStatus
          : true)
        );
      }

员工.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="lastName">Last Name:</label> <input type="text" autocomplete="off" class="form-control" id="lastName" [(ngModel)]="selectedLastName" (input)="onEmployeeSearch()" placeholder="Last Name" /> </div> </div> <div class="col-sm-4 col-xs-6 col-6 "> <div class="form-group"> <label for="employeeStatus">Employee Status</label> <select class="form-control select2bs4 select2-danger" data-dropdown-css-class="select2-danger" [(ngModel)]="selectedStatus" (change)="onEmployeeSearch()" data-placeholder="Select Employee Status" style="width: 100%;"> Employee Status</option> <option *ngFor="let item of employeeStatusData" [value]="item.key">{{item.value}}</option> </select> </div> </div> </div> </div>

JSON响应如下所示：

JSON响应：

    {
        "data": {
            "pageItems": [
                {
                    "id": "1b1b89c0-b18d-4403-b1ba-0a73c1eb2c5c",
                    "firstName": "Janet",
                    "lastName": "Smith",
                    "employeeStatus": 1,
                }
            ],
            "pageSize": 10,
            "currentPage": 1,
            "numberOfPages": 1,
            "totalRecord": 1,
            "previousPage": 0
        }
    }

当在选择下拉列表中表示时，员工状态可以是 0（非活动）或 1（活动）。 这是正确显示它。

理想情况下，我想要实现的是，在更改三个控制字段中的任何一个时：firstName (textImput)、lastName (textInput) 和 employeeStatus (select dropdown)，过滤后的（搜索）结果应该显示在表格上。

两个文本输入（名字和姓氏）工作正常，但选择下拉菜单对更改没有任何影响。

我在哪里错过了它，我该如何纠正它？

谢谢