Angular5封装Material Autocomplete：Observable输入自定义过滤失效问题

看起来你遇到的核心问题是：父组件传入的自定义过滤逻辑没有和Autocomplete的输入值变化联动起来，导致过滤规则没生效。我来给你拆解下问题根源和具体的修复方案。

问题分析 #

你已经暴露了Observable类型的过滤函数输入，但大概率是没在子组件里把输入框的值变化和父组件传入的过滤规则结合起来，直接用了原始选项列表，自然就表现为无过滤的状态。

具体修复方案 #

1. 子组件核心逻辑调整 #

首先子组件需要同时监听两个流：输入框的输入值变化、父组件传入的过滤函数变化，然后把两者结合生成过滤后的选项流。

import { Component, Input, ViewChild, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';
import { Observable, combineLatest } from 'rxjs';
import { map, startWith } from 'rxjs/operators';
import { MatAutocomplete } from '@angular/material/autocomplete';

// 注意：Angular 5对应的RxJS版本可能需要调整combineLatest的导入
// 若上面的导入报错，改用：import { combineLatest } from 'rxjs/observable/combineLatest';

@Component({
  selector: 'app-custom-autocomplete',
  templateUrl: './custom-autocomplete.component.html'
})
export class CustomAutocompleteComponent implements OnInit {
  @Input() options: any[] = [];
  @Input() filterFunction$: Observable<(value: string, option: any) => boolean>;
  @ViewChild(MatAutocomplete) autocomplete: MatAutocomplete;

  inputControl = new FormControl();
  filteredOptions$: Observable<any[]>;

  ngOnInit() {
    // 合并输入值变化流和过滤函数流，任一变化都重新过滤
    this.filteredOptions$ = combineLatest([
      // 初始值设为空字符串，确保组件初始化时就执行一次过滤
      this.inputControl.valueChanges.pipe(startWith('')),
      this.filterFunction$
    ]).pipe(
      map(([inputValue, filterFn]) => {
        // 应用父组件传入的过滤规则
        return this.options.filter(option => filterFn(inputValue, option));
      })
    );
  }
}

2. 子组件模板调整 #

模板里要绑定FormControl，并通过async管道订阅过滤后的选项流：

<input type="text" 
       [formControl]="inputControl" 
       [matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete">
  <mat-option *ngFor="let option of filteredOptions$ | async" 
              [value]="option">
    {{ option.label || option }} <!-- 根据你的选项结构调整显示内容 -->
  </mat-option>
</mat-autocomplete>

3. 父组件使用示例 #

父组件需要把过滤函数包装成Observable传入（注意是Observable类型，不是直接传函数）：

import { Component } from '@angular/core';
import { Observable, of } from 'rxjs';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html'
})
export class ParentComponent {
  // 示例选项列表
  fruitOptions = [
    { label: 'Apple', value: 'apple' },
    { label: 'Banana', value: 'banana' },
    { label: 'Cherry', value: 'cherry' },
    { label: 'Date', value: 'date' }
  ];

  // 初始用startswith过滤
  currentFilter$: Observable<(value: string, option: any) => boolean> = of(
    (inputVal, option) => option.label.toLowerCase().startsWith(inputVal.toLowerCase())
  );

  // 切换为contain过滤
  switchToContainFilter() {
    this.currentFilter$ = of(
      (inputVal, option) => option.label.toLowerCase().includes(inputVal.toLowerCase())
    );
  }
}

父组件模板：

<app-custom-autocomplete 
  [options]="fruitOptions" 
  [filterFunction$]="currentFilter$">
</app-custom-autocomplete>
<button (click)="switchToContainFilter()">切换为包含过滤</button>

关键注意点 #

• 一定要用combineLatest合并两个流：这样不管是用户输入变化，还是父组件切换过滤规则，都会重新执行过滤逻辑。
• 用startWith('')初始化输入值流：确保组件刚加载时，会用空值执行一次过滤，显示所有选项。
• 用async管道订阅：Angular会自动处理订阅和取消订阅，避免内存泄漏。

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