Angular 5中ngx-table列过滤报错Cannot read property 'toLowerCase' of undefined求助

嘿，这个错误我之前帮不少开发者解决过，本质就是你在调用toLowerCase()的时候，某个值是undefined——说白了就是你要过滤的字段要么在数据里不存在，要么有null/undefined的情况。给你几个具体的解决步骤：

1. 给字段加空值兜底，避免直接调用方法 #

最常见的情况是你的数据源里部分数据的目标字段是null或者undefined，这时候直接调用toLowerCase()就会报错。你可以在过滤函数里先做兜底处理：

修改前的过滤函数（可能报错） #

applyFilter(filterValue: string) {
  this.filteredData = this.originalData.filter(item => {
    // 如果item.targetField是undefined，这里直接报错
    return item.targetField.toLowerCase().includes(filterValue.toLowerCase());
  });
}

修改后的过滤函数（安全版本） #

applyFilter(filterValue: string) {
  const lowerCaseFilter = filterValue.toLowerCase();
  this.filteredData = this.originalData.filter(item => {
    // 先把字段值转为空字符串兜底，避免undefined/null
    const fieldValue = item.targetField ?? '';
    return fieldValue.toLowerCase().includes(lowerCaseFilter);
  });
}

或者更严谨的判断，直接跳过空值的条目：

applyFilter(filterValue: string) {
  const lowerCaseFilter = filterValue.toLowerCase();
  this.filteredData = this.originalData.filter(item => {
    // 如果item本身或者目标字段不存在，直接返回false
    if (!item || !item.targetField) return false;
    return item.targetField.toLowerCase().includes(lowerCaseFilter);
  });
}

2. 检查模板中绑定的字段名是否正确 #

另一个常见坑是：你在模板里指定的过滤字段名，和数据源里的字段名不匹配。比如数据源里是userName，模板里写成了username（大小写不一致），这时候取到的就是undefined。

比如你的ngx-table列定义：

<ngx-datatable-column name="用户名" prop="userName">
  <ng-template ngx-datatable-header-template let-column="column">
    <input type="text" (input)="applyFilter($event.target.value, column.prop)" />
  </ng-template>
</ng-template>

一定要确保column.prop对应的字段名和你数据源对象的键完全一致，包括大小写。

3. 临时排查：打印数据确认字段情况 #

如果还是找不到问题，可以在过滤函数里临时打印数据，看看具体是哪个item的字段出了问题：

applyFilter(filterValue: string) {
  this.filteredData = this.originalData.filter(item => {
    console.log('当前item:', item, '目标字段值:', item.targetField);
    const fieldValue = item.targetField ?? '';
    return fieldValue.toLowerCase().includes(filterValue.toLowerCase());
  });
}

通过控制台输出，你就能清楚看到是否有item的目标字段是undefined，或者字段名是否写错了。

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