如何在不修改Angular通用下拉组件的前提下过滤选项列表？

我是Angular初学者，已经创建了一个接收[options]参数的通用下拉组件<app-select>，使用方式如下：

<app-select [control]="profileForm.get('departmentId')" [idAndForAttributes]="'department'" [label]="'Sourced by'"
            [options]="departmentsList"></app-select>

该组件通过*ngFor遍历列表，显示{{item.description}}字段，目前功能正常。现在希望对列表进行过滤，仅显示departmentsList中IsRecruiter=true的选项，但不想修改这个通用组件。

组件TS代码：

import {Component, Input, OnInit} from '@angular/core';
import {FormControl} from '@angular/forms';

@Component({
  selector: 'app-select',
  templateUrl: './select.component.html',
  styleUrls: ['./select.component.css']
})
export class SelectComponent implements OnInit {
  @Input() control: FormControl;
  @Input() label: string;
  //@Input() placeholder: string = "Select...";
  @Input() options: [];
  @Input() idAndForAttributes: string;
  @Input() customClass: string;

  constructor() { }

  ngOnInit() {
  }
}

组件HTML代码：

<div class="form-group" [ngClass]="{'invalid': control.invalid && control.touched && control.dirty}">
  <label [attr.for]="idAndForAttributes">{{ label }}:</label>
  <select class="form-control" [ngClass]="customClass" [formControl]="control" [attr.id]="idAndForAttributes">
    <option value="0">- Select -</option>
    <option *ngFor="let item of options" [ngValue]="item.id">{{item.description}}</option>
  </select>
  <ng-container *ngIf="control.dirty && control.touched && control.invalid">
    <div *ngIf="control.errors.required || (control.errors.min && control.value == 0)">
      <small style="color: #c62828;">
        Value is required.
      </small>
    </div>
  </ng-container>
</div>

不修改通用组件的前提下，有两种简单可行的实现方式：

方法一：父组件传递过滤后的数组 #

直接在父组件中对源数组进行过滤，将过滤后的结果传给<app-select>的options参数，这是最直接高效的方式。

操作步骤： #

1. 在父组件TS文件中定义一个过滤后的计算属性：

// 假设departmentsList是你已有的源数组
get filteredDepartments() {
  return this.departmentsList?.filter(item => item.IsRecruiter === true) || [];
}

2. 在父组件HTML中，将options绑定到这个过滤后的属性：

<app-select [control]="profileForm.get('departmentId')" 
            [idAndForAttributes]="'department'" 
            [label]="'Sourced by'"
            [options]="filteredDepartments"></app-select>

优点：逻辑简单，性能可控，适合静态或变化不频繁的列表。

方法二：使用自定义Angular管道过滤 #

创建一个专用过滤管道，在父组件模板中通过管道处理源数组后再传给组件。

操作步骤： #

1. 创建过滤管道：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'filterRecruiters'
})
export class FilterRecruitersPipe implements PipeTransform {
  transform(items: any[], filterKey: string = 'IsRecruiter'): any[] {
    if (!items) return [];
    return items.filter(item => item[filterKey] === true);
  }
}

2. 在父组件所属的模块中导入并声明该管道。
3. 在父组件HTML中使用管道处理数组：

<app-select [control]="profileForm.get('departmentId')" 
            [idAndForAttributes]="'department'" 
            [label]="'Sourced by'"
            [options]="departmentsList | filterRecruiters"></app-select>

注意：默认管道为纯管道，仅在数组引用变化时重新计算。若departmentsList是动态更新的（如API异步返回），可将管道设置为不纯管道（添加pure: false），但需注意性能影响，不建议在大型列表中使用。

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