Angular数据过滤管道报错：Cannot read property 'toString' of undefined

这个报错的原因其实很直观——你的管道代码里直接调用了element[key].toString()，但数组中某些对象的属性值可能是null或者undefined，这时候强行调用toString()就会抛出这个错误。另外还有个潜在风险：如果传入的array本身是undefined（比如组件里users初始值没初始化），array.forEach也会直接报错。

下面给你几个逐步优化的解决方案：

1. 基础版：添加空值检查+提前优化查询逻辑 #

先给element[key]加空值判断，同时把查询字符串提前转成小写，避免重复转换浪费性能：

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({ name: 'dataFilter' })
export class DataFilterPipe implements PipeTransform {
  transform(array: any[], query: string): any {
    // 新增：如果数组是null/undefined，直接返回空数组
    if (!array) return [];
    if (!query || query === '') {
      return array;
    }
    const lowerQuery = query.toLowerCase(); // 提前转小写，减少重复操作
    let filtered = [];
    array.forEach(function (element) {
      let isAdded = false;
      Object.keys(element).forEach(function (key, index) {
        // 先判断属性值是否存在，再执行后续操作
        if (!isAdded && element[key] != null) {
          const valueStr = element[key].toString().toLowerCase();
          if (valueStr.includes(lowerQuery)) {
            filtered.push(element);
            isAdded = true;
          }
        }
      });
    });
    return filtered;
  }
}

2. 简洁版：使用可选链+函数式编程 #

利用TypeScript的可选链操作符?.，可以更安全地访问属性，同时用filter和some替代嵌套的forEach，代码更简洁易读：

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({ name: 'dataFilter' })
export class DataFilterPipe implements PipeTransform {
  transform(array: any[], query: string): any {
    if (!array) return [];
    if (!query || query === '') {
      return array;
    }
    const lowerQuery = query.toLowerCase();
    // 用filter和some简化逻辑
    return array.filter(element => 
      Object.keys(element).some(key => 
        element[key]?.toString().toLowerCase().includes(lowerQuery)
      )
    );
  }
}

3. 进阶版：处理复杂属性类型 #

如果你的对象里包含嵌套对象这类复杂类型，直接调用toString()会得到[object Object]，过滤效果不符合预期。可以新增一个辅助函数来处理不同类型的值：

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({ name: 'dataFilter' })
export class DataFilterPipe implements PipeTransform {
  transform(array: any[], query: string): any {
    if (!array) return [];
    if (!query || query === '') {
      return array;
    }
    const lowerQuery = query.toLowerCase();
    return array.filter(element => 
      Object.keys(element).some(key => 
        this.getValueAsString(element[key]).includes(lowerQuery)
      )
    );
  }

  // 辅助函数：根据值的类型转换为字符串
  private getValueAsString(value: any): string {
    if (value == null) return '';
    // 如果是对象，序列化后转小写（可根据需求自定义，比如取特定属性）
    if (typeof value === 'object') {
      return JSON.stringify(value).toLowerCase();
    }
    // 原始类型直接转小写
    return value.toString().toLowerCase();
  }
}

额外注意：确保组件中users的初始值 #

在你的组件代码里，记得初始化users为一个空数组，避免模板中传入undefined：

// 组件.ts文件
users: any[] = [];

这样就能彻底解决这个报错问题啦！

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