Angular 2+无Pipe实现搜索：解决.indexOf未定义错误及实时搜索需求

首先，咱们先搞定那个“读取未定义属性indexOf”的错误——这十有八九是你在过滤时没判断目标字段是否存在，或者数据源初始状态是undefined就直接操作了。结合你的需求（不用Pipe、实时双向绑定搜索），给你一套完整的解决方案：

第一步：扎实初始化数据源与过滤结果 #

在组件类里，先把原数据数组和过滤后的结果数组初始化为空数组，从根源避免undefined引发的问题：

// 组件.ts文件
arrayOfGradedC: any[] = []; // 原数据，初始为空数组
filterString = ''; // 双向绑定的搜索字符串
filteredData: any[] = []; // 用来存过滤后的结果，后续*ngFor遍历这个数组

第二步：修复过滤方法的空值判断 #

之前的错误是因为直接调用indexOf时，目标属性可能是undefined。咱们用**可选链操作符?.**规避这个问题，同时用includes替代indexOf（语义更清晰）：

applyFilter(filterValue: string) {
  // 如果搜索框为空，直接返回全部数据
  if (!filterValue.trim()) {
    this.filteredData = [...this.arrayOfGradedC];
    return;
  }

  // 过滤逻辑：先判断目标属性是否存在，再做模糊匹配
  const lowerCaseFilter = filterValue.toLowerCase();
  this.filteredData = this.arrayOfGradedC.filter(item => {
    // 把yourTargetProperty替换成你实际要搜索的字段，比如item.name、item.id等
    const targetContent = item?.yourTargetProperty?.toLowerCase();
    // 只有当目标内容存在且包含搜索关键词时，才保留这条数据
    return targetContent?.includes(lowerCaseFilter);
  });
}

第三步：优化实时搜索体验（防抖处理） #

虽然100+条数据不算多，但每次按键都触发过滤还是有点冗余。用RxJS的防抖功能，让用户停止输入300ms后再执行过滤，体验更流畅：

1. 先导入RxJS相关工具：

import { Subject } from 'rxjs';
import { debounceTime, distinctUntilChanged } from 'rxjs/operators';

2. 在组件里添加防抖Subject并订阅：

private filterTrigger = new Subject<string>();

ngOnInit() {
  // 初始化过滤结果为全部数据（如果原数据是异步获取的，要在获取数据后赋值）
  this.filteredData = [...this.arrayOfGradedC];

  // 防抖订阅：300ms内无新输入才触发过滤，且只有搜索内容变化时执行
  this.filterTrigger.pipe(
    debounceTime(300),
    distinctUntilChanged()
  ).subscribe(value => {
    this.applyFilter(value);
  });
}

// 组件销毁时取消订阅，避免内存泄漏
ngOnDestroy() {
  this.filterTrigger.unsubscribe();
}

第四步：调整模板代码 #

把原来的(keyup)="applyfilter()"改成触发防抖Subject，同时让*ngFor遍历过滤后的filteredData：

<th class="header7">
  <input 
    type="text" 
    placeholder="search" 
    [(ngModel)]="filterString" 
    (keyup)="filterTrigger.next(filterString)"
  >
</th>
<div class="arrayOfGrade" *ngFor="let key of filteredData">
  <!-- 这里放你的数据渲染内容 -->
</div>

关键错误原因总结 #

你之前遇到的indexOf未定义错误，本质是两个可能：

• 要么arrayOfGradedC初始是undefined，直接遍历或过滤时出错；
• 要么你要搜索的字段（比如item.someKey）在某些数据项里不存在，直接调用indexOf就会抛出错误。
  用可选链?.和初始化为空数组就能完美解决这个问题。

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