Angular下拉框集成搜索过滤功能故障排查求助

1. 检查子父组件的搜索词传递逻辑 #

lf-material-search作为子组件，必须将输入的搜索词传递给下拉框父组件：

• 子组件（lf-material-search.component.ts）需定义输出事件：

  import { Component, Output, EventEmitter } from '@angular/core';
  
  @Component({
    selector: 'lf-material-search',
    templateUrl: './lf-material-search.component.html'
  })
  export class LfMaterialSearchComponent {
    searchTerm: string = '';
    @Output() searchTermChange = new EventEmitter<string>();
  
    onInputChange(): void {
      this.searchTermChange.emit(this.searchTerm);
    }
  }
  

• 子组件HTML需绑定输入事件触发传递：

  <input 
    type="text" 
    [(ngModel)]="searchTerm" 
    (ngModelChange)="onInputChange()"
    placeholder="搜索..."
  >
  

• 父组件HTML需监听子组件的输出事件：

  <mat-select>
    <lf-material-search (searchTermChange)="handleSearch($event)"></lf-material-search>
    <mat-option *ngFor="let item of filteredItems" [value]="item">
      {{item.label}}
    </mat-option>
  </mat-select>
  

2. 确认父组件的过滤逻辑实现 #

父组件必须基于接收到的搜索词对下拉选项数组进行过滤：

• 父组件（下拉框组件.ts）需维护原始数组和过滤后数组：

  import { Component } from '@angular/core';
  
  @Component({
    selector: 'app-custom-select',
    templateUrl: './custom-select.component.html'
  })
  export class CustomSelectComponent {
    originalItems = [
      { value: '1', label: 'Burnt Sienna' },
      { value: '2', label: 'Crimson' },
      { value: '3', label: 'Burnt Orange' }
    ];
    filteredItems = [...this.originalItems];
  
    handleSearch(term: string): void {
      if (!term) {
        this.filteredItems = [...this.originalItems];
        return;
      }
      // 忽略大小写的过滤逻辑
      this.filteredItems = this.originalItems.filter(item => 
        item.label.toLowerCase().includes(term.toLowerCase())
      );
    }
  }
  

• 确保下拉选项绑定的是过滤后的数组（filteredItems）而非原始数组。

3. 检查数据绑定与组件配置 #

• 确认lf-material-search组件已在父组件所属模块中声明/导入：
  • 常规组件需添加到模块的declarations数组；
  • 独立组件需添加到父组件的imports数组。
• 若使用ngModel，必须在父组件所属模块中导入FormsModule：

  import { FormsModule } from '@angular/forms';
  
  @NgModule({
    imports: [FormsModule]
  })
  export class YourModule { }
  

4. 排查异步数据场景（若选项来自接口） #

如果下拉选项是异步加载的，需确保过滤逻辑在数据加载完成后执行：

ngOnInit(): void {
  this.dataService.getOptions().subscribe(res => {
    this.originalItems = res;
    this.filteredItems = [...this.originalItems];
  });
}

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