Angular中如何在Signal类型的列表中实现搜索功能

嘿，这问题我熟！你已经有了Signal类型的司机列表，还有绑定好ngModel的搜索输入框，接下来用Angular的computed计算信号就能轻松实现实时搜索过滤，步骤超清晰：

核心思路 #

因为Signal是响应式的，我们可以用computed创建一个依赖于搜索关键词和原始列表的计算信号，它会自动追踪这两个值的变化，实时返回过滤后的结果，完全不用手动订阅或者处理变更检测~

完整实现代码 #

先看组件里的逻辑，我给你写好了完整的示例，直接用就行：

import { Component, computed, signal } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-driver-search',
  standalone: true,
  imports: [FormsModule, CommonModule], // 要导入这两个模块哦
  template: `
    <div>
      <input type="text" pInputText placeholder="Search Driver ..." [(ngModel)]="searchModelDriver" />
    </div>
    <!-- 遍历过滤后的计算信号结果 -->
    <div *ngFor="let driver of filteredDriverList()">
      {{ driver.fullName }}
    </div>
  `
})
export class DriverSearchComponent {
  searchModelDriver: string = '';  
  driverList = signal<any[]>([
    { fullName: 'test1' },
    { fullName: 'test2' },
    { fullName: 'test3' },
  ]);

  // 这里就是关键的过滤逻辑
  filteredDriverList = computed(() => {
    // 把搜索关键词转成小写并去空格，避免大小写和空格的干扰
    const searchKeyword = this.searchModelDriver.toLowerCase().trim();
    
    // 如果搜索框是空的，直接返回全部数据
    if (!searchKeyword) {
      return this.driverList();
    }

    // 过滤出fullName包含关键词的项，同样忽略大小写
    return this.driverList().filter(driver => 
      driver.fullName.toLowerCase().includes(searchKeyword)
    );
  });
}

几个需要注意的点 #

• 在模板里必须调用filteredDriverList()，因为计算信号是一个函数，执行它才能拿到当前的最新值；
• 如果你用的是NgModule而不是standalone组件，记得在对应模块的imports数组里加入FormsModule和CommonModule；
• 如果要支持多字段搜索，比如同时搜ID、姓名，只需要在filter函数里扩展判断条件就行，比如：

  return this.driverList().filter(driver => 
    driver.fullName.toLowerCase().includes(searchKeyword) ||
    (driver.id && driver.id.toString().includes(searchKeyword))
  );
  

这样不管你在搜索框里输入什么，过滤后的列表都会实时更新，完全符合你的需求~

备注：内容来源于stack exchange，提问作者davood beheshti