Angular实现输入框对数组对象全字段搜索过滤的问题求解

原逻辑存在直接修改渲染用数组的问题，多次搜索后会丢失原始联系人数据，我们先修复这个问题，再实现全字段搜索需求：

第一步：调整组件类属性 #

新增原始数据备份变量，同时修改搜索绑定变量名适配全字段搜索的语义：

export class TableListComponent implements OnInit {
  entry: ContactListEntry = {
    id: null,
    firstName: '',
    secondName: '',
    firstMobileNumber: '',
    secondMobileNumber: '',
    firstEmail: '',
    secondEmail: '',
    roomNumber: '',
    task: '',
    notes: '',
  };

  // 页面渲染用的联系人列表
  listOfContacts = [];
  // 全量原始联系人备份，永远不修改该数组，仅作为搜索的数据源
  originalContacts = [];
  // 原firstName变量语义不适配全字段搜索，改名更合理
  searchKeyword: string = '';

  constructor(private dataServiceService: DataServiceService, private dialog: MatDialog) {}

  ngOnInit(): void {
    this.originalContacts = this.dataServiceService.getContacts();
    this.listOfContacts = [...this.originalContacts];
  }

第二步：重写Search方法实现全字段匹配 #

Search() {
    const keyword = this.searchKeyword.trim().toLocaleLowerCase();
    // 搜索词为空时直接返回全量数据
    if (!keyword) {
      this.listOfContacts = [...this.originalContacts];
      return;
    }

    this.listOfContacts = this.originalContacts.filter(contact => {
      // 在此处定义需要参与搜索的字段，可根据需求增减
      const searchableFields = [
        contact.id?.toString() || '',
        contact.firstName,
        contact.secondName,
        contact.firstMobileNumber,
        contact.secondMobileNumber,
        contact.firstEmail,
        contact.secondEmail,
        contact.roomNumber,
        contact.task
      ];
      // 只要任意一个字段包含搜索关键词就算匹配成功
      return searchableFields.some(field => 
        field.toLocaleLowerCase().includes(keyword)
      );
    })
  }
}

第三步：修改模板搜索框绑定 #

把原搜索框的绑定变量替换为新的searchKeyword：

<input
  type="text"
  [(ngModel)]="searchKeyword"
  (input)="Search()"
  placeholder="搜索姓名、手机号、邮箱、房间号等"
/>

补充说明 #

• 如果希望后续新增的联系人字段自动加入搜索范围，可把searchableFields替换为Object.values(contact).map(val => val?.toString() || '')，无需手动维护字段列表
• 此处用includes做子串匹配比原逻辑的match更合适，不会出现正则特殊字符报错的问题，性能也更优

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