如何无需检查输入数组长度即可复用多个ngx-mat-select-search实例？

问题背景 #

开发了可复用的MatTooltipSelectAllComponent组件，父组件通过异步请求获取pdoNames和beneficiaryClassifications数据后，分别绑定给多个组件实例。但只有第一个绑定pdoNames的实例能正常加载数据，后续绑定beneficiaryClassifications的实例筛选列表为空。

目前只能通过*ngIf="beneficiaryClassifications?.length > 0"让后续实例工作，但该写法会在数组为空时隐藏组件，无法满足“数组为空时组件仍需显示”的需求。

原因分析 #

核心问题在于组件的selectOptions setter与ngOnInit的执行顺序，以及数据更新时的筛选逻辑未同步：

• 父组件异步数据返回时，组件已完成ngOnInit初始化，setter中仅一次设置filteredMulti的初始值，未触发筛选逻辑；
• 未处理空数组的边界情况，导致数据为空时筛选列表无正确输出；
• ReplaySubject的缓存机制未与数据更新逻辑联动，后续实例无法获取最新数据。

解决方案 #

1. 修正selectOptions setter逻辑 #

确保每次更新数据时处理空值，并触发筛选逻辑：

@Input() set selectOptions(selectOptions: SelectOption[]) {
  this._selectOptions = selectOptions || []; // 空值时默认空数组
  this.filterMulti(); // 数据更新时立即触发筛选
}
get selectOptions(): SelectOption[] {
  return this._selectOptions;
}
private _selectOptions: SelectOption[] = []; // 初始化默认空数组

2. 完善filterMulti筛选方法 #

补充组件中缺失的筛选实现，确保空数组、空搜索词都能正确处理：

private filterMulti() {
  if (!this.selectOptions) return;
  
  const searchKeyword = this.multiFilterCtrl.value?.toLowerCase() || '';
  const filteredList = this.selectOptions.filter(option => 
    option.name.toLowerCase().includes(searchKeyword)
  );
  
  this.filteredMulti.next(filteredList);
}

3. 调整ngOnInit初始化逻辑 #

移除setter中直接更新filteredMulti的代码，改为在ngOnInit中初始化筛选，确保组件加载时同步数据：

ngOnInit() {
  // 监听选中值变化逻辑保持不变
  this.multiCtrl.valueChanges
    .pipe(takeUntil(this._onDestroy))
    .subscribe(() => {
      this.newOptionSelected.emit(this.multiCtrl.value);
    });    

  // 监听搜索词变化逻辑保持不变
  this.multiFilterCtrl.valueChanges
    .pipe(takeUntil(this._onDestroy))
    .subscribe(() => {
      this.filterMulti();
    });

  // 初始化筛选，确保组件加载时同步数据状态
  this.filterMulti();
}

4. 父组件移除多余*ngIf判断 #

直接绑定数据即可，组件内部已处理空数组场景：

<app-mat-tooltip-select-all
  [selectOptions]="beneficiaryClassifications"
  [placeHolderName]="'Beneficiary Classifications'"
  (newOptionSelected)="onBeneficiaryClassificationsChange($event)"
></app-mat-tooltip-select-all>

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